как загрузить и удалить файлы из dropzone.js

Для удаления эскизов вам необходимо включить addRemoveLinks: true и использовать опцию «removefile» в dropzonejs

removefile: Вызывается всякий раз, когда файл удаляется из списка. Вы можете прослушать это и удалить файл с вашего сервера, если хотите.

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

Я также добавил ajax-вызов для скрипта delete и выглядит следующим образом:

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

Это работает на моей стороне, поэтому я надеюсь, что это поможет.

в дополнение к лучшему ответу выше – для удаления пробелов и замены тире и преобразования в нижний регистр примените этот js в файле dropzone.js:

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

к обработке имени файла – я отредактировал файл dropzone.js И вышеупомянутый вызов ajax. Таким образом, клиент обрабатывает filenaming, и он автоматически отправляется на сторону php / server, поэтому вам не придется переделывать его там, и его URL-адрес безопасен в значительной степени.

В некоторых случаях js изменялся в зависимости от функции / именования:

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: (div id = "msg">) в html, который позволит обработать / удалить ошибки на стороне сервера, чтобы отправить сообщение обратно пользователю.

в 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

Очевидно, вы создали бы функцию js вместо того, чтобы повторять код, но поскольку изменения именования меня устраивают. Вы можете просто передать переменные в js-функции самостоятельно, чтобы обрабатывать пространства имен файлов / символы / и т. Д.

Да, вы можете легко удалить файл из базы данных, а также из папки сервера. Я сделал это, написав функцию и вызвав 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; 

Вы можете получить рабочий код отсюда