我正在实现 dropzone.js，一切都很完美，直到我尝试上传多个同名文件，假设从 iOS 设备上传照片，所有文件都同名：image.jpg，我可以更改文件我的 php 代码中的名称，但问题是在 dropzone 中不再可以访问，例如，删除上传的照片，因为我将以两个不同的名称结尾，一个在文件中用我的 php 重命名，另一个在 dropzone 中。
那么，任何人都可以帮助我吗？有没有办法在用js上传之前重命名文件？
谢谢，
【问题讨论】：
标签： jquery html dropzone.js
@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 中，调用查询 "从图像中删除 lastmodify=removeData";
例如...
希望对您有所帮助。
【讨论】：
根据 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));
});
【讨论】：
我在我的项目中使用了一个 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 上，我返回存储在服务器中的新文件名的回显。
然后我在成功事件期间针对 file.name 使用“中等”自定义数组/对象将其配对。
dropzone_files.push({'new_name': Response, 'old_name': file.name});
然后，在删除时，由于 file 仍然是原始文件名，但这一次，我们可以与 arrayobject 进行比较以获取新的文件名，并在每次单击时通过另一个 ajax post 从数组中删除该对象，但这一次, 使用新的文件名，引用。
这也是：https://github.com/enyo/dropzone/issues/656
问候。
【讨论】：
您是否正确设置了 paramName？而且你需要记住，如果uploadMultiple 为真，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，因此您想要的名称不会被替换。但是，如果您确实想要更多，您应该为通过侦听事件“addfile”添加的每个文件添加一个 data-id，然后在通过“sending”发送文件时获取它。
希望对你有用:)
【讨论】：