layui的多图上传挺不错的 但是官方demo方法中限制文件大小的参数是限制所有图片总和大小，不能限制单图大小
现解决这个问题 同时该方案还解决了多图上传预览、csrf_token验证 、预览图片删除等问题
前端
依赖包
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="/static/layui/layui.js"></script>
<script src="/static/js/jquery-1.8.2.min.js"></script> //除layui之外包
前端代码
{% csrf_token %}
<div>
<button type="button" class="layui-btn layui-btn-lg" id="test1">
<i class="layui-icon"></i>选择图片
</button>
<div class="layui-row" style="1500px;">
<div class="layui-upload-list"></div>
</div>
<input type="text" name="provename" id="provename" value={{text}} hidden=True readonly="readonly">
<input type="submit" id ="abc" class="layui-btn layui-btn-radius layui-btn-normal" style="font-size: 25px;" value=上传图片>
</div>
<script>
layui.use(['upload', 'jquery','layer'], function(){
var upload = layui.upload;
var $ = layui.jquery;
var layer = layui.layer; //layui弹出层
//执行实例
var uploadInst = upload.render({
elem: '#test1', //绑定元素
multiple: true,
method: 'POST',
auto: false,
data: {
'csrfmiddlewaretoken': function () { //csrf_token验证
return $(':input:first').val()
},
provename: function(){
return $('#provename').val(); //传入后台额为动态参数
}
},
acceptMime: 'image/*',
bindAction: "#abc",//绑定上传
url: "/provee/", //上传接口
choose: function (obj) { //obj参数包含的信息，跟 choose回调完全一致
//将每次选择的文件追加到文件队列
files = obj.pushFile();
obj.preview(function (index, file, result) {
$(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="252px;height:348px;">')
if(file.size >1024*500){ //判断上传每个图片大小
delete files[index]; //过大删除指定图片
$('#remove_' + index).remove(); //展示容器移除
layer.msg('文件大小不得超过500KB', {icon: 5}); //layui弹出层
}
$('#remove_' + index).bind('dblclick', function () {//双击删除指定预上传图片
delete files[index];//删除指定图片
$(this).remove();
})
})
},
done: function (res) { //回调
if (res.code==0) { //上传成功后操作
layer.msg("图片上传成功！", { icon: 1, time: 1000 }, //弹出层
//清空文件列表
function (){
for (let x in files) {
delete files[x];
}
$(".layui-upload-list").html(""); //清空div
});
if(res.msg=="null"){ //其余操作
window.location.href="{% url 'successful' %}"
}
if(res.msg!="null"){ //其余操作
$("#provename").attr("value",res.msg); //赋值input value
$("#provena").html(res.msg); //赋值div
}
}
//上传完毕回调
},
error: function () {
//请求异常回调
}
});
});
</script>