javascript - cómo cargar y eliminar archivos de dropzone.js

php jquery

Question

He utilizado el siguiente código: la imagen se ha eliminado, pero la imagen en miniatura sigue apareciendo.

 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

Además de la mejor respuesta anterior, para eliminar espacios y reemplazar con guiones y convertir a minúsculas, aplique este js en el archivo dropzone.js:

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

para el manejo del nombre de archivo: edité el archivo dropzone.js Y la llamada ajax anterior. De esta manera, el cliente maneja el nombre de archivo y se envía AUTOMÁTICAMENTE al lado de php / server para que no tenga que rehacerlo allí, y su URL es bastante segura.

En algunos casos, el js cambió según la función / denominación:

dropzone.js - línea 293 (aprox):

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

dropzone.js - línea 746 (aprox.):

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

Moví toda la sección de archivos eliminados a la parte superior de dropzone.js así:

 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",

Tenga en cuenta que también agregué en un cuadro de mensaje en el html: (div id = "msg">) en el html que permitirá el manejo / eliminación de errores del lado del servidor para enviar un mensaje al usuario también.

en dropzone.php:

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

Esto es solo una expansión con código de trabajo de mi lado. Tengo 3 archivos, dropzone.html / dropzone.php / dropzone.js

Obviamente, crearías una función js en lugar de repetir el código, pero como los cambios de nombre se adaptaban a mí. Usted podría simplemente pasar las variables en una función js usted mismo para manejar espacios de archivos / caracteres / etc.

Answer 2

Para eliminar miniaturas tienes que habilitar addRemoveLinks: true, y usar la opción "removefile" en dropzonejs

se ha eliminado un archivo cuando se elimina un archivo de la lista. Puede escuchar esto y eliminar el archivo de su servidor si lo desea.

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

También agregué una llamada ajax para eliminar el script y se parece a esto:

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

Funciona de mi lado, así que espero que ayude.

Answer 3

Sí, puede eliminar fácilmente el archivo de la base de datos, así como de la carpeta del servidor. Hice esto escribiendo una función y llamando a delete.php y pasé fid como parámetro:

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

establecer fid como este

file.fid=responseText;  

Puedes obtener el código de trabajo desde here