html文件实现:
<div class="layui-form-item pr-15">
<label class="layui-form-label">图片上传<sup>*</sup></label>
<div class="layui-input-block">
<div class="layui-upload-drag" id="test10">
<i class="layui-icon"></i>
<p>点击上传,或将文件拖拽到此处</p>
</div>
</div>
</div>
js:加载方法及上传图片方法封装实现:
//加载状态首先定义一个fales true
function showloading(t) {
if (t) {//如果是true则显示loading
// console.log(t);
loading = layer.load(1, {
shade: [0.3, '#000'], //0.1透明度的白色背景
content:'<p style="position: relative;left: -50px;">图片上传中,请耐心等待...</p>',
success: function (layerContentStyle) {
layerContentStyle.find('.layui-layer-content').css({
'padding-top': '50px',
'text-align': 'left',
'line-height':'30px',
'color':'#fff',
'width': '300px'
})
}
});
}else{//如果是false则关闭loading
// console.log("关闭loading层:" + t);
layer.closeAll('loading');
}
}
//拖拽上传
upload.render({
elem: '#test10'
,url: '/api/Uploads/typelist?action=layui_img_one'
,before: function(input) {
//返回的参数item,即为当前的input DOM对象
showloading(true)
}
,done: function(res){
showloading(false)
if(res.code==0){
layer.msg(res.msg);
$("#test10").html('<img src="'+res.data.src+'" width="100" height="140">')
}else{
layer.msg(res.msg);
}
// console.log(res)
}
});
来源:https://blog.csdn.net/onlylele/article/details/98874319