使用dropzone.js上傳多個具有相同file.name的文件

Question

我正在實施dropzone.js，一切都很完美，直到我嘗試上傳具有相同名稱的多個文件，比方說從iOS設備上傳所有照片相同的名稱：image.jpg，我可以在我的php代碼中更改文件名，但問題是，在dropzone中不再可訪問，例如刪除上傳的照片，因爲我將以文件中的兩個不同名稱結尾用我的php和另一個在dropzone重命名。

那麼，任何人都可以幫助我呢？在用js上傳之前，有一種方法可以重命名文件？

謝謝，

Answer 1

您是否正確設置了paramName？您需要記住，如果uploadMultiple爲true，則Dropzone會將[]添加到此字段，以便您可以通過由paramName命名的數組獲取值。

但是，如果您無論如何要重命名你可以試試這個：

Dropzone.options.myAwesomeForm = { 
    paramName: "file", 
    uploadMultiple: true, 
    parallelUploads: 1, 
    //[more configuration] 

    init: function() { 
    var myDropzone = this; 

    //[some code] 

    this.on("sending", function(file, xhr, formData) { 
     var name = "name-you-want-and-should-be-unique"; 
     formData.append(name, file); 
    }); 

    //[some more code] 
    } 
} 

注意，我設置parallelUploads爲1，所以你想要的名字不會被取代。但是，如果您確實想要更多，則應通過偵聽事件「addedfile」將數據ID添加到您添加的每個文件中，然後在通過「發送」發送文件時將其添加。

我希望你覺得它有用:)

Answer 2

我使用jQuery的版本在我的項目建立。我希望你不介意，也許這會幫助無論如何..？

var dropbox = $(form); 
var dropzone_files = []; 


dropbox.dropzone({ 
url: '/etc/', 
init: function() { 
var Dropzone = this; 
// remove function 
this.on('removedfile', function(file) { 
for(var i=0; i< dropzone_files.length; i++) { 
    if (file.name == dropzone_files[i]['old_name']) { 
    var file_name = dropzone_files[i]['new_name']; 
    var data = { 'file_name' : dropzone_files[i]['new_name'] }; 
    break; 
    } 
} 
console.log(data); 
var removeData = form.serialize() + '&' + $.param(data); 
//console.log(removeData); 
$.ajax({ 
     type: 'POST', 
     url: 'your-dropzone-remove-file.php', 
     data: removeData, 
     success: function(report) { 
      dropzone_files.splice(i,1); 
      console.log(dropzone_files); 
      //do more things here 
     }); 
// end init 
}, 
//upload function 
success: function(file, Response) { 
     //console.log(Response); is your response from php file of whatever rename. 
     // pair up old-filename with new file name. 
     dropzone_files.push({'new_name': Response, 'old_name': file.name}); 
     //console.log(dropzone_files); 
     // do whatever 
     } 
}); 

我發現了兩個成功或刪除事件，函數（文件）的「文件」，（即file.name）總是拖入Dropbox的原始文件名。沒有辦法改變這一點。因此，如果您在上傳過程中上傳了重命名的文件，除非我們將值存儲在某處，否則您將無法刪除它。我試圖扭曲它的值或更新它的值，包括append（），push（）和map（），但沒有成功。

so on upload.php我返回存儲在服務器中的新文件名的回聲。

然後我在成功事件期間使用'medium'自定義數組/對象在file.name上進行配對。

dropzone_files.push({'new_name': Response, 'old_name': file.name}); 

然後，在刪除，因爲文件仍然是原來的文件名，但這個時候，我們可以比較反對ArrayObject的得到新的文件名，並從各自爲陣刪除對象通過其他阿賈克斯後點擊，但這一次，與新的文件名，提到。

這還有：https://github.com/enyo/dropzone/issues/656

問候。

Answer 3

這是一個非常簡單的方法來根據hien的答案做到這一點。這個例子也使用jQuery插件。

添加文件時，讓服務器回顯服務器上文件的名稱。使用dropzone成功事件捕獲此文件，並將該服務器文件名作爲文件對象的新屬性附加。然後，您可以訪問dropzone removedfile事件上的屬性，並將其作爲要刪除的文件的名稱發送回服務器。

this.on("success", function (file, serverFileName) { 
    file.serverFileName = serverFileName; 
}); 
this.on("removedfile", function (file) { 
    $.post("process.php?deleteFile=" + encodeURIComponent(file.serverFileName)); 
}); 

Answer 4

@Hien的解決方案的工作，但是，問題是，當你上傳2個或多個文件具有相同的原始名稱，因爲你的for循環會一直配合陣列上的第一形象，將刪除這個元素。但是，此元素不一定是您要刪除的圖像...

我已將「file.lastModified」屬性添加到您的dropzone_files []中，因此它似乎是唯一的。它爲我的作品：

dropzone_files.push({'new_name': response, 'old_name': file.name, 'lastModified':file.lastModified}); 

，然後在你的if條件：

if (file.name == dropzone_files[i]['old_name'] && file.lastModified==dropzone_files[i]['lastModified']) {/**/} 

注： 我覺得lastmodify是唯一的，所以，也許另一種解決方案是：店lastmodify值與IMG上你的數據庫。然後，您可以將此唯一值存儲在removeData中。然後，在你的php中，調用查詢 「DELETE FROM images WHERE lastmodify = removeData」;

例如...

希望得到這個幫助。