多图上传

<script>
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test2' //绑定元素
,url: "{:url('common/upload')}" //上传接口
,data:{use:'article_thumb'}
,done: function(res){
console.log(res)
//上传完毕回调
if(res.code == 2) {
$('#demo1').attr('src',res.src);
$('#demo2').append('<input type="hidden" name="thumb1[]" value="'+ res.src+'"[]><img src="'+res.src+'" width="100" height="100">');
} else {
layer.msg(res.msg);
}
}
,error: function(){
//请求异常回调
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
</script>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>

posted @ 2021-01-07 17:26  胡良庆  阅读(151)  评论(0编辑  收藏  举报