HTML代码:
<div class="layui-col-sm4">
<label class="layui-form-label">上传图片:</label>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1" name="thumb">
<p id="demoText"></p>
</div>
</div>
</div>
JS代码:
layui.use(['form','layer','laydate','upload'], function(){
$ = layui.jquery;
var form = layui.form,
upload = layui.upload,
laydate = layui.laydate
,layer = layui.layer;
//执行一个upload实例 logo图片上传
var uploadInst =upload.render({
elem: '#test1'
,url: '后端链接'
,accept: 'file' //普通文件
,size:1024
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').css('display', "block"); //图片链接(base64)
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//如果上传失败
if(res.status >1){
return layer.msg('上传失败');
}
//上传成功
$("#file").val(res.data)
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
})