php 如何从 dropzone.js 上传和删除文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19375389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to upload and delete files from dropzone.js
提问by Aaru
I have used the below code the image has been deleted but the thumbnail image still showing.
我使用了下面的代码，图像已被删除，但缩略图仍然显示。
Dropzone.options.myDropzone = {
init: function() {
this.on("success", function(file, response) {
file.serverId = response;
});
this.on("removedfile", function(file) {
if (!file.serverId) { return; }
$.post("delete-file.php?id=" + file.serverId);
});
}
回答by 6opko
For deleting thumbnails you have to enable addRemoveLinks: true, and to use "removedfile" option in dropzonejs
要删除缩略图，您必须启用 addRemoveLinks: true，并在 dropzonejs 中使用“removedfile”选项
removedfile: Called whenever a file is removed from the list. You can listen to this and delete the file from your server if you want to.
removefile：每当从列表中删除文件时调用。如果您愿意，您可以收听此内容并从您的服务器中删除该文件。
addRemoveLinks: true,
removedfile: function(file) {
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}
I also added an ajax call for delete script and it looks like this:
我还添加了一个删除脚本的ajax调用，它看起来像这样：
addRemoveLinks: true,
removedfile: function(file) {
var name = file.name;
$.ajax({
type: 'POST',
url: 'delete.php',
data: "id="+name,
dataType: 'html'
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}
It works on my side, so I hope it helps.
它对我有用，所以我希望它有所帮助。
回答by Fstarocka Burns
in addition to the best answer above - to remove spaces and replace with dashes and convert to lower case apply this js in the dropzone.js file:
除了上面的最佳答案 - 删除空格并替换为破折号并转换为小写，在 dropzone.js 文件中应用此 js：
name=name.replace(/\s+/g, '-').toLowerCase();
to the filename handling - I edited the dropzone.js file AND the above ajax call. This way the client handles the filenaming and it AUTOMATICALLY gets sent to the php/server side so u dont have to redo it there, and its url safe pretty much.
到文件名处理 - 我编辑了 dropzone.js 文件和上面的 ajax 调用。这样客户端处理文件命名，它会自动发送到 php/服务器端，所以你不必在那里重做，它的 url 几乎是安全的。
In some instances the js changed depending on the function / naming:
在某些情况下，js 会根据函数/命名发生变化：
dropzone.js - line 293 (approx):
dropzone.js - 第 293 行（大约）：
node = _ref[_i];
node.textContent = this._renameFilename(file.name.replace(/\s+/g, '-').toLowerCase());
dropzone.js - line 746 (approx):
dropzone.js - 第 746 行（大约）：
Dropzone.prototype._renameFilename = function(name) {
if (typeof this.options.renameFilename !== "function") {
return name.replace(/\s+/g, '-').toLowerCase();
}
return this.options.renameFilename(name.replace(/\s+/g, '-').toLowerCase());
};
I moved the whole removedFile section up to the top of dropzone.js like so:
我将整个removedFile部分移动到dropzone.js的顶部，如下所示：
autoQueue: true,
addRemoveLinks: true,
removedfile: function(file) {
var name = file.name;
name =name.replace(/\s+/g, '-').toLowerCase(); /*only spaces*/
$.ajax({
type: 'POST',
url: 'dropzone.php',
data: "id="+name,
dataType: 'html',
success: function(data) {
$("#msg").html(data);
}
});
var _ref;
if (file.previewElement) {
if ((_ref = file.previewElement) != null) {
_ref.parentNode.removeChild(file.previewElement);
}
}
return this._updateMaxFilesReachedClass();
},
previewsContainer: null,
hiddenInputContainer: "body",
Note I also added in a message box in the html: (div id="msg">) in the html that will allow server side error handling/deleting to post a message back to the user as well.
注意我还在 html 中添加了一个消息框：(div id="msg">) 在 html 中，这将允许服务器端错误处理/删除也将消息回传给用户。
in dropzone.php:
在 dropzone.php 中：
if(isset($_POST['id']){
//delete/unlink file
echo $_POST['id'].' deleted'; // send msg back to user
}
This is only an expansion with working code on my side. I have 3 files, dropzone.html/dropzone.php/dropzone.js
这只是我这边的工作代码的扩展。我有 3 个文件，dropzone.html/dropzone.php/dropzone.js
Obviously you would create a js function instead of repeating the code but since the naming changes it suited me. You could just pass the variables in a js function yourself to handle filename spaces / chars / etc.
显然，您将创建一个 js 函数而不是重复代码，但由于命名更改，它适合我。您可以自己在 js 函数中传递变量来处理文件名空间/字符/等。
