显示层
<div class="layui-form-item layui-col-md-offset1 layui-col-md10">
<label class="layui-form-label">多图片上传</label>
<div class="layui-input-block">
<input type="hidden" name="del" id="del" value="">
<input type="hidden" id="hid" value="{$photourl}">
<input type="hidden" name="photo" id="photo" value="{$photourl}">
<div id="uploader" class="container">
<div class="queueList">
<div class="placeholder">
<div id="filePicker"></div>
<p>或将照片拖到这里</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="layui-progress layui-progress-big active" lay-showpercent="true">
<div class="layui-progress-bar layui-bg-blue" lay-percent="0%">
</div>
<span></span>
</div>
<div class="info"></div>
<div class="btns">
<div id="goPicker" class="filePicker2"></div>
<div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
</div>
js代码 -----url指向你的后台上传操作
//多图片上传
upload.render({
elem: '#multiple_img_upload'
,url: '/admin/Goods/upload'
,multiple: true
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#div-slide_show').append('<img src="'+ result +'" alt="'+ file.name
+'" title="点击删除" class="layui-upload-img">')
});
}
,done: function(res){
//如果上传成功
if (res.status == 1) {
//追加图片成功追加文件名至图片容器
multiple_images.push(res.data.url);
$('.multiple_show_img').val(multiple_images);
layer.msg(res.msg);
}else {
//提示信息
dialog.tip(res.message);
}
}
});
核心js ------type:代表可以上传的图片后缀名 也可以加gif
var n = wk.uploads({num:3,type:'jpg,png',url:"{:url('admin/upload/upload')}"});
function imgDel(e,obj){
wk.uploads_del(e,obj,n,"{:url('admin/upload/deleteLocality')}");
}