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

根据hien的回答，这是一种非常简单的方法。此示例还使用jQuery插件。

当添加文件时，让服务器回显服务器上文件的名称。使用dropzone success事件捕获此事件，将服务器文件名附加为文件对象上的新属性。然后，您可以在dropzone removedfile事件上访问该属性，并将其作为要删除的文件的名称发送回服务器。

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

Answer 3

@Hien的解决方案有效，但问题是当您上传两个或多个具有相同原始名称的文件时，因为您的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是独一无二的，所以，也许另一种解决方案是：在你的数据库中使用你的img存储lastmodify值。然后，您可以将此唯一值存储在removeData中。然后，在您的PHP中，调用查询 “DELETE FROM images WHERE lastmodify = removeData”;

例如......

希望得到这个帮助。

Answer 4

我在我的项目中使用了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）始终是拖入收件箱的原始文件名。没有办法改变这一点。因此，如果您在上传过程中上传重命名的文件，除非我们将值存储在某处，否则您将无法将其删除。

我尝试过多次尝试扭曲其值或更新其值，包括append（），push（）和map（），但没有成功。

所以在upload.php上我返回存储在服务器中的新文件名的echo。

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

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

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

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

问候。

使用dropzone.js使用相同的file.name上载多个文件

4 个答案: