前言
之前已经有些过相关的文件上传的功能，这里就不详细介绍fileinput相关的信息了
fileinput 文件上传：https://blog.csdn.net/qq_43030934/article/details/126949901
回显效果（目前只优化了图片和pdf格式的回显）
直接上代码：
1.html
在引入fileinput组件之后在html部分将此块代码添加到你的代码中即可
<!--add attachment-->
<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格式，大小不超过50M</span>#}
<span class="form-text text-muted">文件回显预览只支持pdf和图片，所有文件大小不超过50M。</span>
</div>
此外，还需要引入入相应的js
<script src="/static/pages/commonPlatform/xxx.js" type="text/javascript"></script>
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] = '<img src="' + 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] = '<iframe src="/static/public/pdfReader/web/viewer.html?file=' + jsonData[i].file_url + '" width="100%" height="100%" style="border: 0;overflow: hidden;"></iframe>'
// previewJson[i] = jsonData[i].file_url
} else if (text_list.indexOf(file_type) > -1) {
previewJson[i] = '<object src="' + jsonData[i].file_url + '" type="text/plain;charset=UTF-8" class="kv-preview-data file-preview-text"></object>'
// previewJson[i] = '<iframe src="' + jsonData[i].file_url + '" width="100%" height="100%" style="border: 0;overflow: hidden;" scrolling="no"></iframe>';
// previewJson[i] = '<text type="text/plain;charset=UTF-8" src="' + jsonData[i].file_url + '" class="file-preview-image" style="width: auto; height: auto;">'
} else if (msg_list.indexOf(file_type) > -1) {
previewJson[i] = '<div src="' + jsonData[i].file_url + '" class="kv-preview-data file-preview-text"></div>'
} else {
// previewJson[i] = "<div class='file-preview-other'><span class='file-other-icon'><i class='glyphicon glyphicon-file'></i></span></div>"
previewJson[i] = '<div src="' + jsonData[i].file_url + '" class="kv-preview-data file-preview-text"></div>'
}
//组装配置
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: '可拖拽文件到这里<br>(文件只支持一次性选择,再次选择文件将会覆盖原来的文件!)',
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: "<i class='glyphicon glyphicon-king'></i>",
//回显的重点
// 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);
}
});
}
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())
fileinput中文实例文档：http://www.bootstrap-fileinput.com/examples.html
扫一扫
6528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
