flask+ajax 实现同时删除文件列表和服务器上的文件

问题背景

        在使用flask+dropzone开发多文件上传功能时，发现dropzone控件只能删除列表里的文件，而不能删除已经上传到服务器的文件。因此想要通过修改js代码解决该问题。

        观察一下addRemoveLinks的代码，是通过js在页面添加了一个指向“javasccript:undefined”的超链接（即不做任何处理），然后通过监听removedFile事件将列表里的文件移除。

if (this.options.addRemoveLinks) {
   file._removeLink = Dropzone.createElement("<a class=\"dz-remove\" href=\"javascript:undefined;\" data-dz-remove>" +this.options.dictRemoveFile + "</a>");
   file.previewElement.appendChild(file._removeLink);
}

        一个比较朴素的想法是，修改href="/remove"指向flask的路由，并且在对应函数中进行文件删除：

if (this.options.addRemoveLinks) {
   file._removeLink = Dropzone.createElement("<a class=\"dz-remove\" href=\"/remove\" data-dz-remove>" +this.options.dictRemoveFile + "</a>");
   file.previewElement.appendChild(file._removeLink);
}

from flask import request, render_template
from config import UPLOAD_FOLDERS #这是我自己配置的存储路径
import os
@app.route('/remove')
def remove():
    _file = request.files.get('file')
    pth = os.path.join(UPLOAD_FOLDERS,_file)
    if os.path.exists(pth):
        os.remove(pth)
    return render_template('upload.html')

        确实可以实现删除，但render_template函数会重新渲染upload页面，导致列表里的其他文件也不再显示：

        这不符合用户使用需求。

解决方案

        考虑使用flask+ajax实现页面的局部更新。

        照例先观察dropzone.js里关于removedfile的源代码：

removedfile: function(file) {
    var _ref;
    if (file.previewElement) {
      if ((_ref = file.previewElement) != null) {
            _ref.parentNode.removeChild(file.previewElement);
    }
   }
   return this._updateMaxFilesReachedClass();
}

        事件监听函数：

this.on("removedfile", (function(_this) {
      return function() {
          return _this.updateTotalUploadProgress();
      };

        一个非常简单的解决方案是在removedfile函数里添加ajax代码段：

removedfile: function(file) {
    var _ref;
    $.ajax({
        type:'POST',
        url:'remove',
        data:{'filename':file.name},
        success:function(){
            /* success responese */        
        },
        error:function(){
            /* error responese */          
        }    
    });    
    if (file.previewElement) {
      if ((_ref = file.previewElement) != null) {
            _ref.parentNode.removeChild(file.previewElement);
    }
   }
   return this._updateMaxFilesReachedClass();
}

        然后修改flask服务器上对应的后台处理代码：

@app.route('/remove', methods=['POST'])
def remove():
    _file = request.form.get('filename')
    pth = os.path.join(UPLOAD_FOLDERS,_file)
    if os.path.exists(pth):
        os.remove(pth)
        return '',200
    return 'File %s not found' % _file, 404

            需要注意的是：1.这里文件名的获取方式不再是通过request.files而是request.form; 2.ajax使用post提交时，flask函数里必须设置methods=['POST']，否则会报错405（不允许的操作）；3. 返回信息应当进行进一步处理（比如jsonfy)，我这里偷个懒，简单地写个框架出来。

        之后运行就可以得到目标效果啦！