layui实现多图上传,支持拖拽上传
示例:支持多图上传,支持拖拽上传,下方有文件上传信息提示
html代码:
<div class="layui-upload"> <div class="layui-upload-drag" id="test2"> <i class="layui-icon"></i> <p>点击多图上传,或将文件拖拽到此处</p> </div> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> 预览图: <div class="layui-upload-list" id="demo2"></div> </blockquote> <p id="tipTxt"></p> </div>
JS代码:
layui.use(['element', 'layer','form','upload'], function(){ var $ = layui.jquery ,layer = layui.layer ,element = layui.element ,upload = layui.upload ,form = layui.from; //多图片上传 upload.render({ elem: '#test2' ,url: 'xxx.xxx' //改成您自己的上传接口 ,multiple: true ,accept:'images' ,exts:'jpg|jpeg|png|gjf|webp|bmp|tif' ,drag:true ,allDone: function(obj){ var txt = "共选择了 【"+obj.total+"】 张图片,其中,上传成功 【"+obj.successful+"】 张,失败 <span style='color:red'>【"+obj.aborted+"】 </span>张"; $("#tipTxt").html(txt); } ,before: function(obj){ //预读本地文件示例,不支持ie8 obj.preview(function(index, file, result){ $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">') }); } ,done: function(res){ $('#demoText').html(''); //上传完毕 if (res.code == 200) { layer.msg('上传完毕', {icon: 1}); } } }); });
后端接口就是上传图片的接口
——现在的努力,只为小时候吹过的牛逼! ——