layui实现⽂件或图⽚上传记录
接下来是我⾃⼰的使⽤记录：
1.⾸先在js中定义⼀个全局变量
var uploadListIns;
2.进⾏赋值
//多⽂件列表⽰例
/**
* 图⽚上传
*/
layui.use('upload', function(){
var allSuccess = 1;
var $ = layui.jquery,upload = layui.upload;
var demoListView = $('#proImageList');
uploadListIns = der({
elem: '#chooseFile', //选择⽂件的按钮
url: 'upload!ftp.action', //后台处理⽂件长传的⽅法
data:{'serviceName':'外协订单供应商上传检验报告','tableName':'T_OUTSOURCE_ORDER','fileType':'图⽚'},
accept: 'file',
multiple: true, //是否允许多⽂件上传
acceptMime: 'image/*', //规定打开⽂件选择框时，筛选出的⽂件类型
field:'upload',
auto: false,
bindAction: '#upload', //⽤来触发上传的按钮ID
choose: function(obj){ //选择⽂件后的回调函数，本例中在此将选择的⽂件进⾏展⽰
var files = this.files = obj.pushFile(); //将每次选择的⽂件追加到⽂件队列
//读取本地⽂件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td>等待上传</td>'
,'<td>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,
'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的⽂件
<()[0].value = ''; //清空 input file 值，以免删除后出现同名⽂件不可选
});
demoListView.append(tr);
});
},
done: function(res, index, upload){ //多⽂件上传时，只要有⼀个⽂件上传成功后就会触发这个回调函数
console.info(res);
if(res.status == "success"){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span >上传成功</span>');
tds.eq(3).html('<a href="'+res.url+'">查看</a>'); //清空操作
return delete this.files[index]; //删除⽂件队列已经上传成功的⽂件
}else{
ssage);
}
<(index, upload);
},
allDone: function(obj){ //当⽂件全部被提交后，才触发
if(allSuccess != 1){
//al > obj.successful){ 本来是⽤的这个做法，后来发现obj.successful是指请求成功的⽂件数，我有⼀次上传⼀个⽂件失败的时候发现这个值居然也是1，所以就不采⽤这个做法了，换成在error回调函数中对allSuccess进⾏赋值 layer.msg("有⽂件上传失败，暂不更新⽣产进度，请重试
或联系管理员");
}else {
//更新⽣产进度
updateProductionSchedule(currentId, currentSchedule);
}
},
error: function(index, upload){
allsuccess = 0;
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span >上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显⽰重传
}
});
$(".layui-upload-file").hide();
});
上述js代码中出现的相关html元素如下，相关引⼊js⽂件和css为：bootstrap3的js和css及layui的js⽂件即可
<!-- 模态框（Modal） -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
上传检验报告
</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary" id="chooseFile">选择多⽂件</button>
<button type="button" class="btn btn-success" id="upload">开始上传</button>
<div class="table-responsive">
<table class="table table-hover">
<thead><tr>
<th>⽂件名</th>
<th>⼤⼩</th>
<th>状态</th>
<th>操作</th>
</tr></thead>
<tbody id="proImageList"></tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
3.在打开模态框时可以对1中定义的变量进⾏动态赋值，这些变量会相应的传到后台中：function showUploadModal(id) {
//动态赋值
layui和bootstrap哪个好$("#uploadModal").modal("show");
}
4.最终前端实现效果如下:
发表评论