douyan1453
douyan1453
2013-10-15 07:21

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

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); 
    });
  }
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • doujieluo5875 doujieluo5875 8年前

    For deleting thumbnails you have to enable addRemoveLinks: true, and to use "removedfile" option in dropzonejs

    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.

    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:

    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.

    点赞 评论 复制链接分享
  • dowdw44426 dowdw44426 4年前

    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:

    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.

    In some instances the js changed depending on the function / naming:

    dropzone.js - line 293 (approx):

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

    dropzone.js - line 746 (approx):

    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:

     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.

    in 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

    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.

    点赞 评论 复制链接分享

相关推荐