jQuery 使用 dropzone.js 上传具有相同文件名的多个文件

Uploading multiple files with the same file.name using dropzone.js

提问by orlandob11

I'm implementing dropzone.js and everything is perfect until I try to upload multiple files with the same name, let's say uploading photos from an iOS device where all have the same name: image.jpg, I can change the file name in my php code but the problem is that is no longer accessible in dropzone for example, to delete a photo uploaded, because I will end with two different names one in the file renamed with my php and the other in dropzone.

我正在实施 dropzone.js 并且一切都很完美，直到我尝试上传多个具有相同名称的文件，假设从 iOS 设备上传照片，其中所有文件都具有相同的名称：image.jpg，我可以更改我的文件名php 代码，但问题是不再可以在 dropzone 中访问，例如，删除上传的照片，因为我将以两个不同的名称结尾，一个在用我的 php 重命名的文件中，另一个在 dropzone 中。

So, anyone can help me with that? There's a way to rename the file before upload with js?

那么，任何人都可以帮助我吗？有没有办法在用js上传之前重命名文件？

Thanks,

谢谢，

回答by amandasantanati

Did you set paramName correctly? And you need to remember that Dropzone will add [] to this field if uploadMultiple is true, so you can get the values through an array named by your paramName.

您是否正确设置了 paramName？并且您需要记住，如果uploadMultiple 为true，Dropzone 会向该字段添加[]，因此您可以通过由您的paramName 命名的数组获取值。

But if you want to rename anyway you could try this:

但如果你想重命名，你可以试试这个：

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]
  }
}

Note that I set parallelUploads to 1 so the name you want won't be replaced. But if you do want more you should put an data-id to every file you add through listening to event "addedfile" and then take it when you send the file through "sending".

请注意，我将 parallelUploads 设置为 1，因此不会替换您想要的名称。但是，如果您确实想要更多，则应该通过侦听事件“ addedfile”将数据ID添加到您添加的每个文件中，然后在通过“发送”发送文件时获取它。

I hope you find it useful :)

希望对你有帮助 ：）

回答by Carlton Jacobson

This is a very simple way to do it based off hien's answer. This example also users the jQuery plugin.

When a file is added, have the server echo back name of the file on the server. Capture this with the dropzone success event, appending the server file name as a new property on the file object. Then you can access the property on the dropzone removedfile event, and send it back to the server as the name of the file to be deleted.

这是基于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));
});

回答by Ebarroso

The solution of @Hien works, but, the problem is when you upload 2 or more files with the same original name, because your for loop will match always the first image on the array, and will remove this element. but, this element is not necessarily the image that you want to remove...

@Hien 的解决方案有效，但是，问题是当您上传 2 个或更多具有相同原始名称的文件时，因为您的 for 循环将始终匹配数组中的第一个图像，并将删除此元素。但是，此元素不一定是您要删除的图像...

I have added the "file.lastModified" property to your dropzone_files[], cause it seems to be unique. It works for me:

我已将“file.lastModified”属性添加到您的 dropzone_files[]，因为它似乎是独一无二的。这个对我有用：

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

And then, in your if condition:

然后，在您的 if 条件下：

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

Note: I think lastmodify is unique, so, maybe another solution is: store lastmodify value with your img on your Database. Then, you could store this unique value in your removeData. Then, in your php, call the query "DELETE FROM images WHERE lastmodify=removeData";

注意：我认为 lastmodify 是独一无二的，因此，也许另一个解决方案是：将 lastmodify 值与您的 img 一起存储在您的数据库中。然后，您可以将此唯一值存储在您的 removeData 中。然后，在您的 php 中，调用查询“DELETE FROM images WHERE lastmodify=removeData”；

For example...

例如...

Hope this help.

希望这有帮助。

回答by Deviance

I'm using a jQuery version build up in my project. I hope you don't mind, and maybe this will help in anyway..?

我在我的项目中使用了一个 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
        }
});

I found out that on both success or remove event, the 'file' of function(file), (i.e. file.name) is always the original file name dragged into the dropbox. There is no way to change this. Therefore, if you upload a renamed file during upload, you will not be able to remove it unless we have the value stored somewhere.

我发现在成功或删除事件中，函数（文件）的“文件”（即文件名）始终是拖入保管箱的原始文件名。没有办法改变这一点。因此，如果您在上传过程中上传重命名的文件，除非我们将值存储在某处，否则您将无法删除它。

I tried many attempt to distort its values or update its values, including append(), push(), and map() but didn't succeed on it.

我尝试了许多尝试扭曲其值或更新其值的尝试，包括 append()、push() 和 map()，但都没有成功。

So on upload.php I return an echo of the new file name stored in the server.

因此，在upload.php 上，我返回存储在服务器中的新文件名的回显。

Then I pair it up using a 'medium' custom array/object during on success event against the file.name.

然后，在成功事件期间，我使用“中等”自定义数组/对象将其与 file.name 配对。

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

Then, on remove, since file is still the original filename, but this time, we can compare against the arrayobject to get the new filename, and delete the object from the array on each click via another ajax post, but this time, with the new file name, referred.

然后，在删除时，由于文件仍然是原始文件名，但是这一次，我们可以与数组对象进行比较以获取新文件名，并在每次单击时通过另一个 ajax 帖子从数组中删除该对象，但这次，使用新文件名，引用。

This as well: https://github.com/enyo/dropzone/issues/656

这也是：https: //github.com/enyo/dropzone/issues/656

Regards.

问候。