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();
});
}
});
})