如何从dropzone.js上传和删除文件

我已经使用下面的代码图像已被删除，但仍然显示缩略图图像。

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); }); } 

Answer 1

要删除缩略图，您必须启用addRemoveLinks：true，并使用dropzonejs中的“removedfile”选项

removedfile：从列表中删除文件时调用。 你可以听取这个，如果你想从你的服务器上删除文件。

 addRemoveLinks: true, removedfile: function(file) { var _ref; return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; } 

我还添加了一个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; } 

它在我身边，所以我希望它有帮助。

Answer 2

除了上面的最佳答案之外 – 删除空格并用破折号replace并转换为小写在dropzone.js文件中应用此js：

 name=name.replace(/\s+/g, '-').toLowerCase(); 

到文件名处理 – 我编辑了dropzone.js文件和上面的ajax调用。 这样，客户端处理文件提交，并自动发送到PHP /服务器端，所以你不必在那里重做，它的url很安全。

在某些情况下，js根据function/命名而改变：

dropzone.js – 第293行（大约）：

 node = _ref[_i]; node.textContent = this._renameFilename(file.name.replace(/\s+/g, '-').toLowerCase()); 

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()); }; 

我把整个removeFile部分移到了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", 

注意我还在html中添加了html：（div id =“msg”>）中的一个消息框，它将允许服务器端error handling/删除，以便将消息发送回给用户。

在dropzone.php中：

 if(isset($_POST['id']){ //delete/unlink file echo $_POST['id'].' deleted'; // send msg back to user } 

这只是在我身边的工作代码扩大。 我有3个文件，dropzone.html / dropzone.php / dropzone.js

显然你会创build一个js函数，而不是重复代码，但是因为命名改变了它适合我。 你可以传递一个js函数中的variables来处理文件名空格/字符等。

Answer 3

是的，您可以轻松地从数据库以及从服务器文件夹中删除文件。 我通过编写一个函数并调用delete.php并传递了fid作为参数来完成此操作：

 function deletefile(value) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { alert(xmlhttp.responseText); } } xmlhttp.open("GET","delete.php?fid="+value,true); xmlhttp.send(); } 

设置这样的fid

 file.fid=responseText; 

你可以从这里得到工作代码