前端bootstrap+fileInput+django后端文件编辑回显

前言

之前已经有些过相关的文件上传的功能，这里就不详细介绍fileinput相关的信息了
fileinput 文件上传：https://blog.csdn.net/qq_43030934/article/details/126949901
回显效果（目前只优化了图片和pdf格式的回显）

直接上代码：

1.html

在引入fileinput组件之后在html部分将此块代码添加到你的代码中即可

    
    <div class="form-group" id="fileParent">
        <label class="font-weight-bold">Add attachments:label>
        <input name="uploadFile" type="file" id="uploadFileId" multiple class="file-loading"/>
        {#                        <span>支持jpg, jpeg, png, gif, bmp, pdf, doc, docx, xls, xlsx, ppt, pptx, zip, rar, txt, html, msg格式，大小不超过50Mspan>#}
        <span class="form-text text-muted">文件回显预览只支持pdf和图片，所有文件大小不超过50M。span>
    div>
1
2
3
4
5
6
7

此外，还需要引入入相应的js

 <script src="/static/pages/commonPlatform/xxx.js" type="text/javascript">script>
1

2.js

在引入下面的js之后就会在页面中生效

var fileList = []
var isFirstSelect = true

$(function () {
    var initialPreviewData = document.getElementById("feature_file_initialPreviewData_id").value
    console.log(initialPreviewData)
    var jsonData = eval("(" + initialPreviewData + ")");
    //图片
    var previewJson = [];
    //图片配置
    var initPreviewConfig = [];
    for (var i = 0; i < jsonData.length; i++) {
        // console.log(jsonData[i])
        var img_list = ['jpg', 'jpeg', 'jpe', 'gif', 'png', 'pns', 'bmp', 'png', 'tif']
        var pdf_list = ['pdf']
        var msg_list = ['msg']
        var text_list = ['txt', 'md', 'csv', 'nfo', 'ini', 'json', 'php', 'js', 'css'];
        var file_type = jsonData[i].file_type
        // console.log(file_type)
        // todo:回显格式待优化
        if (img_list.indexOf(file_type) > -1) {
            previewJson[i] = '+ jsonData[i].file_url + '" class="file-preview-image" style="width: 100%; height: 100%;">'
            // previewJson[i] = jsonData[i].file_url
        } else if (pdf_list.indexOf(file_type) > -1) {
            previewJson[i] = ''
            // previewJson[i] = jsonData[i].file_url
        } else if (text_list.indexOf(file_type) > -1) {
            previewJson[i] = ''
            // previewJson[i] = '';
            // previewJson[i] = ''
        } else if (msg_list.indexOf(file_type) > -1) {
            previewJson[i] = '
+ jsonData[i].file_url + '" class="kv-preview-data file-preview-text">
'
        } else {
            // previewJson[i] = "
"
            previewJson[i] = '
+ jsonData[i].file_url + '" class="kv-preview-data file-preview-text">
'
        }
        //组装配置
        var tjson = {
            caption: jsonData[i].file_name, // 展示的文件名
            width: 'auto',
            url: jsonData[i].file_url, // 删除url
            key: jsonData[i].file_id, // 删除时Ajax向后台传递的参数
            type: jsonData[i].file_type,
            size: jsonData[i].file_size,
            downloadUrl: jsonData[i].file_url,
            /*  extra: function() {
                 return {"id":id};
             } */ //这里也可以携带格外的参数
        };
        initPreviewConfig[i] = tjson;
    }
    // console.log(previewJson)
    //初始化fileinput
    initFileInput("uploadFileId", previewJson, initPreviewConfig)
});

//文件初始化
function initFileInput(ctrlName, previewJson, initPreviewConfig) {
    var control = $('#' + ctrlName);
    control.fileinput({
        layoutTemplates: {
            // footer:'',//隐藏全部小图标；
            actionUpload: '',//去除上传预览缩略图中的上传图片；
            // indicator: '', //去除上传状态图标(左侧➕)
            actionDrag: '',//去除拖动图标(通常编辑的时候会显示这个图标)
            actionDelete: '',//去除删除图标
            //其他 参考fileinput.js/fileinput.min.js中 搜索 layoutTemplates，可以看到模板内所有元素  需要改哪个，直接在这里赋空字符串就行了
        },
        language: 'zh', //设置语言
        theme: "fa",
        dropZoneTitle: '可拖拽文件到这里
(文件只支持一次性选择,再次选择文件将会覆盖原来的文件!)',
        uploadUrl: '', //上传的地址
        // allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'zip', 'rar', 'txt', 'bmp', 'html', 'msg'], //接收的文件后缀,空为不受限制
        allowedFileExtensions: [], //接收的文件后缀,空为不受限制
        uploadAsync: true, //默认异步上传
        showUpload: false, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showCaption: true, //是否显示标题
        showClose: false,

        dropZoneEnabled: true, //是否显示拖拽区域
        // initialPreviewAsData: true,

        maxFileSize: 1024 * 50,//单位为kb，如果为0表示不限制文件大小,10M
        //minFileCount: 0,
        maxFileCount: 30, //表示允许同时上传的最大文件个数
        // maxFilesNum: 3, //表示允许同时上传的最大文件个数
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        enctype: 'multipart/form-data',
        overwriteInitial: true,
        autoReplace: true, //达到最大上传数时，自动替换之前的附件
        // initialPreviewFileType: 'pdf',
        browseClass: "btn btn-primary", //按钮样式: btn-default、btn-primary、btn-danger、btn-info、btn-warning
        // previewFileIcon: "",
        //回显的重点
        // initialPreviewShowDelete:true,	//是否显示初始化数据的删除按钮
        initialPreview: previewJson,		//初始化图片
        initialPreviewConfig: initPreviewConfig,	//初始化图片配置
    }).on('fileclear', function () {
        console.log('fileclear!!!!!!!!')
        var data_id = $('#feature_id').val()
        console.log(data_id)
        var postData = {
            'data_id': data_id
        }
        console.log(postData)
        $.messager.confirm({
            title: '提示', msg: '移除文件将会同步服务器删除文件!', fn: function (r) {
                if (r) {
                    var jsonData = JSON.stringify(postData);
                    $.ajax({
                        url: server_url + '/file/del_extension_file/',
                        method: 'POST',
                        data: jsonData,
                        dataType: "json",
                        processData: false,
                        contentType: false,
                        cache: false,
                        success: function (data) {
                            console.log("data:" + data);
                            console.log("data:" + data.status);
                            if (data.status === 200) {
                                console.log("data:" + data.msg);
                                $.messager.alert({title: '提示', msg: data.msg, icon: 'info'});
                                return
                            }
                            console.log(data)
                            $.messager.alert({title: '提示', msg: data.msg, icon: 'warning'});
                        },
                        //请求失败，包含具体的错误信息
                        error: function (data) {
                            console.log('error' + data.msg);
                            $.messager.alert({title: '提示', msg: '请求服务错误或当前网络不佳！', icon: 'warning', top: 200});
                        }
                    });
                }
            }
        });
    }).on('filepredelete', function (event, key, jqXHR, data) {
        console.log('delete!!')
        // initFileInput("input-id",previewJson,initPreviewConfig);
    });
}

// 编辑提交表单部分
function editFEForm() {
    var checkDoc = false; //判断是否被选择条件
    var chboxVal = []; //存入被选中项的值
    var prd_oecc_d = $("input[name = oecc_domestic]"); //获得得到所的复选框
    var prd_oecc_e = $("input[name = oecc_oversea]"); //获得得到所的复选框
    var prd_oe_d = $("input[name = oe_domestic]"); //获得得到所的复选框
    var prd_oe_e = $("input[name = oe_oversea]"); //获得得到所的复选框
    var submitbtn1 = document.getElementById("editFETop");
    var submitbtn2 = document.getElementById("editFEBottom");
    // var form = document.forms[0];
    var title = document.getElementById("id_title").value;
    var name = document.getElementById("id_full_name").value;
    var category = document.getElementById("id_category").value;
    var descript = document.getElementById("id_description").value;
    // var plan_date = document.getElementById("id_plan").value;
    // var mrd_date = document.getElementById("id_mrd_date").value;

    //确认是否有任何产品被选中
    for (var i = 0; i < prd_oecc_d.length; i++) {
        if (prd_oecc_d[i].checked) {
            checkDoc = true;
            chboxVal.push(prd_oecc_d[i].value); //将被选择的值追加到
        }
    }
    for (var i = 0; i < prd_oecc_e.length; i++) {
        if (prd_oecc_e[i].checked) {
            checkDoc = true;
            chboxVal.push(prd_oecc_e[i].value); //将被选择的值追加到
        }
    }
    for (var i = 0; i < prd_oe_d.length; i++) {
        if (prd_oe_d[i].checked) {
            checkDoc = true;
            chboxVal.push(prd_oe_d[i].value); //将被选择的值追加到
        }
    }
    for (var i = 0; i < prd_oe_e.length; i++) {
        if (prd_oe_e[i].checked) {
            checkDoc = true;
            chboxVal.push(prd_oe_e[i].value); //将被选择的值追加到
        }
    }
    //确认必选项是否都已填
    if (title === '' || name === '' || category === '' || descript === '') {
        submitbtn2.disabled = false;
        submitbtn1.disabled = false;
        // alert("Must input all items with * !");
        $.messager.alert("提示", 'Must input all items with * !', "warning");
        return false;
    } else if (!checkDoc) {
        submitbtn2.disabled = false;
        submitbtn1.disabled = false;
        // alert("Must select at least one product!");
        $.messager.alert("提示", 'Must select at least one product!', "warning");
        return false;
    } else {
        // alert("：" + chboxVal);
        var formData = new FormData($("#editFeatureExtensionForm")[0]);
        // $("#uploadFileId").fileinput("upload");  // 单独上传文件接口
        submitForm(formData)
    }
}

function submitForm(formData) {
    // var form = document.forms[0];
    console.log(formData.data)
    // var jsonData = JSON.stringify(formData);
    var submitbtn1 = document.getElementById("editFETop");
    var submitbtn2 = document.getElementById("editFEBottom");
    $.ajax({
        url: server_url + '/feature_extension/edit_feature_extensions/',
        method: 'POST',
        data: formData,
        dataType: "json",
        processData: false,
        contentType: false,
        cache: false,
        success: function (data) {
            console.log("data:" + data);
            console.log("data:" + data.res);
            if (data.status === 200) {
                $.messager.alert("提示", data.msg, "info");
                console.log("data:" + data.msg);
                submitbtn2.disabled = true;
                submitbtn1.disabled = true;
                submitbtn1.value = "loading...";
                submitbtn2.value = "loading...";
                window.setTimeout("window.location=server_url+'/feature_extension'", 500);
                return;
            }
            console.log(data)
            $.messager.alert("提示", data.msg, "info");
        },
        //请求失败，包含具体的错误信息
        error: function (data) {
            console.log(data.msg);
        }
    });

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245

3.Django后端需要返回的信息
这里就不贴全部代码了，返回的信息很简单

def edit_demo(request, register_id):
	...
	...
	...
	change_request_files = register.changeRequestFile.all()  # 查询该条数据的所有文件
	initialPreviewData = []  # 返回回显的文件信息列表
	for file in change_request_files:
	    initialPreviewData.append({
	        'file_id': file.id,
	        'file_url': SERVER_URL + '/' + file.file.url,  # SERVER_URL为服务器的地址，后面拼接的是文件的路径
	        'file_type': file.suffix.lower(),  # 文件后缀转为小写防止上传的时候有大写的情况前端处理时无法显示
	        'file_name': file.filename,
	        'file_size': file.file.size
	    })
	form.initialPreviewData = initialPreviewData 
	return render(request, 'registers/edit_demo.html', locals())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

fileinput中文实例文档：http://www.bootstrap-fileinput.com/examples.html