layui upload.render 问题 有偿
如图 4个上传图片的
<div class="drop">
<div id="drop_area">div>
<div id="drop_area2">div>
<div id="drop_area3">div>
<div id="drop_area4">div>
div>
<script >
var dragImgUpload = new DragImgUpload("#drop_area",true,{
callback:function (files) { //tup.php?imgpath=zhutu
//回调函数，可以传递给后台等等
//多图片上传 tup.php?imgpath=zhutu
return layer.msg('开始上传' );
upload.render({
elem: '#preview',
url: 'tup.php?imgpath=zhutu' //上传接口
,accept: 'images'
,method: 'post'
,data: { Parm1: "hello", Parm2: "world" }
,done: function(res){
//上传完毕回调
alert("上传成功！");
}
,error: function(){
//请求异常回调
alert("上传失败！");
}
});
}
})
var dragImgUpload2 = new DragImgUpload("#drop_area2",false,{
callback:function (files) {
//回调函数，可以传递给后台等等
var file = files[0];
console.log(file.name);
}
})
var dragImgUpload3 = new DragImgUpload("#drop_area3",false,{
callback:function (files) {
//回调函数，可以传递给后台等等
var file = files[0];
console.log(file.name);
}
})
var dragImgUpload4 = new DragImgUpload("#drop_area4",false,{
callback:function (files) {
//回调函数，可以传递给后台等等
var file = files[0];
console.log(file.name);
}
})
script>
你这个赋值方式是又问题的
首先主图点击上传多图时
,done: function(res){
//上传完毕回调
alert("上传成功！");
}
时候就动态赋值给其他选项，而不是下面又写new DRagImgUpload方法；你这样写是获取不到返回的数组值得；
其次，不建议你这样写；建议这样写，参考网址https://blog.csdn.net/hzhairuntao/article/details/116296092
动态写比较好，假如已经有其他动态框，重新名称一样覆盖前面的值就行
- 建议你看下这篇博客👉 ：使用layui的upload.render遇到的问题
这是一段 JavaScript 代码，它实现了图片拖拽上传功能。代码中有四个变量 dragImgUpload、dragImgUpload2、dragImgUpload3、dragImgUpload4，分别对应四个不同的 div 元素，这四个变量都是 DragImgUpload 类的实例，它们都有一个 callback 参数，当图片上传成功后会调用这个回调函数。
代码中还使用了一个第三方库 layer.js, 它是一个用于实现弹窗效果的库，在 callback 函数中使用了 layer.msg() 方法显示“开始上传”的消息。
同时，还有一个上传接口 'tup.php?imgpath=zhutu'，它会接受上传的文件并将文件存储到服务器上。
总之，这段代码实现了四个图片上传功能，每次上传后都会调用 callback 函数进行处理。
1、如果是分开上传多张图片，那就调用多次上传接口。
2、如果是一次性上传多张图片，定义一个全局变量保存选择的所有图片，上传成功之后，将图片数据回显即可。
这段代码是实现拖拽上传图片的功能，使用了 DragImgUpload 库。代码中定义了4个不同的上传区域，分别是 "#drop_area"，"#drop_area2"，"#drop_area3" 和 "#drop_area4"。对于每一个上传区域都实例化了一个 DragImgUpload 对象，并且设置了不同的参数。
其中 callback 函数会在图片上传完成之后调用，可以在这里实现图片上传到后台服务器的操作。
这里使用的是 layui 的 upload 模块上传图片，在 callback 函数中调用了 upload.render() 方法来完成上传操作。
可以看出，这段代码是实现了4个上传图片的功能，每个上传图片都有一个独立的 callback 函数，可以根据需求进行更改。
你是遇到了什么问题呢
你目前这个做法不是批量上传，一个控件上传一张图的吧，批量上传的参考代码如下：
var s = "";
var upload_num=5;//每次最多上传多少张
//上传图片
var uploadInst = upload.render({
elem: '#test1' //绑定元素
, url: '/api/' //上传接口
,acceptMime: 'image/*' //普通文件
,exts: 'jpg|png|gif|bmp|jpeg' //只允许上传压缩文件
, size: 1000
, multiple: true
, number: upload_num
, before: function (obj) {
this.data={'action':'upload','picpath':'koubei'};
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
var oldsttr=$("#imgUrls").val();//保存已上传图片的隐藏input
var choose_length=Object.keys(obj.pushFile()).length;
var img_arr=[];
if(oldsttr!=''){
img_arr=oldsttr.split(",");
}
if(img_arr.length+choose_length>upload_num){
layer.msg('最多上传'+upload_num+'张图片', {icon: 5});
var UPLOAD_FILES = obj.pushFile();
for(var x in UPLOAD_FILES){
delete UPLOAD_FILES[x];
}
return false;
}
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
if(file.size >0.3*1024*1024){ //判断上传每个图片大小
layer.msg('文件大小不得超过0.3M', {icon: 5}); //layui弹出层，icon：5，时，是一个嘴角向下的脸
var UPLOAD_FILES = obj.pushFile();
for(var x in UPLOAD_FILES){
delete UPLOAD_FILES[x];
}
return false;
}
});
}
, done: function (res,index) {
delete this.files[index]//移除队列中文件 ---这很重要防止之前的图片重复上传
if (s == "") {
s = JSON.stringify(res.imgsrc);
} else {
s = s + "," + JSON.stringify(res.imgsrc);
};
$('#uploader-list').append('<div class="layui-inline" ><div class="handle"><i class="layui-icon layui-icon-delete fr del-img"></i></div><img style="width: 100px;height: 100px;" src='+ res.imgsrc +'></div>')
$("#imgUrls").val(s);
layer.msg(res.msg);
return false;
}
, error: function () {
}
});
<div class="drop">
<div id="drop_area"></div>
<div id="drop_area2"></div>
<div id="drop_area3"></div>
<div id="drop_area4"></div>
</div>
<script >
var dragImgUpload = new DragImgUpload("#drop_area",true,{
callback:function (files) { //tup.php?imgpath=zhutu
//回调函数，可以传递给后台等等
//多图片上传 tup.php?imgpath=zhutu
return layer.msg('开始上传' );
upload.render({
elem: '#preview',
url: 'tup.php?imgpath=zhutu' //上传接口
,accept: 'images'
,method: 'post'
,data: { Parm1: "hello", Parm2: "world" }
,done: function(res){
//上传完毕回调
alert("上传成功！");
}
,error: function(){
//请求异常回调
alert("上传失败！");
}
});
}
})
var dragImgUpload2 = new DragImgUpload("#drop_area2",false,{
callback:function (files) {
//回调函数，可以传递给后台等等
var file = files[0];
console.log(file.name);
}
})
var dragImgUpload3 = new DragImgUpload("#drop_area3",false,{
callback:function (files) {
//回调函数，可以传递给后台等等
var file = files[0];
console.log(file.name);
}
})
var dragImgUpload4 = new DragImgUpload("#drop_area4",false,{
callback:function (files) {
//回调函数，可以传递给后台等等
var file = files[0];
console.log(file.name);
}
})
</script>