传其它参数:
html:
<div id="type1" style="display: block;">
<div class="layui-form-item">
<label class="layui-form-label">图片/文件</label>
<div class="layui-input-block layui-upload">
<button type="button" class="layui-btn" id="test-upload-normal">上传</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="test-upload-normal-img">
<p id="test-upload-demoText"></p>
</div>
</div>
</div>
js代码
//上传文件(统一接口)
var uploadInst = upload.render({
elem: '#test-upload-normal'
,url: '{:url('uploads')}'
,data: {
upload_type: function(){
return $("input[name='upload_type']:checked").val();
},
file_type:function(){
return $("input[name='type']:checked").val();
}
}
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#test-upload-normal-img').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//如果上传失败
return layer.msg('上传失败');
//上传成功
// $('#test-upload-normal').innerHTML='上传';
// console.log('3000')
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#test-upload-demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
},
progress: function(n, elem){
var percent = n + '%' //获取进度百分比
// element.progress('demo', percent); //可配合 layui 进度条元素使用
//loading层
elem.innerHTML = '<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i><span>'+n+'</span>';
//以下系 layui 2.5.6 新增
// console.log('===',elem.innerText); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
}
});
进度条部分:
官方文档:
https://www.layui.com/doc/modules/upload.html