评论：图片上传拖动排序插件(原创)  [查看原文]

编辑回显参考2楼
附带批量上传失败删除图片的方法
ajax 提交失败后的处理如下：

error: function(responseStr) {
    data.('file', file_one);
    // console.log(file_type);
    //12出错后的动作
    self.msg("errorPort...");
    self.msg(responseStr);
    self.setView(file_type, 1, 'icon-error', '上传失败');
    para.errorPort(responseStr);
    var this_file = {};
    var this_id = '';
    var md5 = file_type['md5'];
    all = self.files_all;
    for (let key in all) {
        if (all[key]['md5'] == md5) {
            this_file = all[key];
            this_id = key;

            break;
        }
    }
    self.files_all[this_id];
    // $(this).parent().parent('li').remove();
    $(".FraUpload_imglist li").each(function() {
        console.log($(this).data('md5'))
        if ($(this).data('md5') == md5) {
            $(this).remove()
        }
    });
    para.Post(this_file);
    $(".fileInput").val('')
}

编辑时能回显：
FraUpload.js 30行后添加代码：def     : {},同时修改一下createHtml方法，在createHtml方法中的view_DOM = $("#"+view_id);后添加如下代码：

for (var i = 0; i < para.def.length; i++) {
    var name = para.def[i].substring(para.def[i].lastIndexOf("\/"), para.def[i].length);
    view_DOM.append('' + name + '已上传的')
    self.files_all[i] = {
        filename: name,
        size: '100',
        type: 'img',
        obj: '',
        md5: name,
        is_upload: '',
        ajax: {
            code: 1,
            msg: '成功',
            data: {
                id: 1,
                filepath: para.def[i]
            }
        },
    }
}

这样，实例化插件是需要带上def，如：

a = $("#upload_duixiang").FraUpload({
    view: ".show", // 视图输出位置
    url: "/admin/depart/uploadImg.html", // 上传接口
    fetch: "img", // 视图现在只支持img
    debug: false, // 是否开启调试模式
    def: ['test1.jpg', 'test2.jpg', 'test3.jpg'],
});

修改思路，实例化图片上传插件时，将需要回显的图片以js数组的形式赋值给def。改造createHtml方法，在初始化插件的时候遍历回显def中的图片，同时将回显得图片推进files_all中【这一步最关键】。

王冲0
2020/6/19 11:08:47
请问如何 将回显得图片推进files_all中，非常感谢无私付出。

Ade-constraint1
2020/7/6 18:30:26
return HttpResponse(json.dumps(result), content_type = "application/json")

import json
result = {
    "code": 1,
    "msg": "操作成功",
    "data": {
        "id": "407",
        "filepath": "/uploads/article/20190717/6c25fd31c7821214a991bd9323e1d303.jpg"
    },
    "url": "",
    "wait": 3
}
return HttpResponse(json.dumps(result), content_type = "application/json")