ラユイ多ファイルアップロードについて(ここでは画像をアップロードする例)
27480 ワード
多くなくて直接コードを贴ってみんなと分かち合います.
htmlコードブロック
htmlコードブロック
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList"> button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr><th> th>
<th> th>
<th> th>
<th> th>
tr>thead>
<tbody id="demoList">tbody>
table>
div>
<button onclick="noFile()" type="button" class="layui-btn" id="testListAction"> button>
div>
jsコードブロック //
var demoListView = $('#demoList')
var uploadListIns = upload.render({
elem: '#testList'
, url: parent.getApiUrl('system/bus-img/uplodFileBackstage')
, headers: {'Authorization': token}
//
, size: 31457280
//
, acceptMime: 'image/jpg, image/png'
, multiple: true
//
, auto: false
//
, bindAction: '#testListAction'
//
, before: function () {
//
var data = {}
data.busId = compId;
this.data = data;
}
//
, allDone: function (obj) {
//
uploadsize = obj.successful;
//
showImg();
//
layer.alert(" ")
}
//
, choose: function (obj) {
var files = this.files = obj.pushFile(); //
//
obj.preview(function (index, file, result) {
imgIndex = imgIndex + 1
var len = 5-pendingPicturesNum
var tr = $(['+ index + '">'
, '' + file.name + ''
, '' + (file.size / 1014).toFixed(1) + 'kb'
, ' '
, ''
,''
, ''
, ''
, ''].join(''));
if (imgIndex > len){
layer.msg(" "+len+" ")
delete files[index]; //
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; // input file ,
return;
}
//
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//
tr.find('.demo-delete').on('click', function () {
delete files[index]; //
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; // input file ,
imgIndex = imgIndex - 1
});
demoListView.append(tr);
});
}
, done: function (res, index, upload) {
if (res.respCode == 200) { //
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html(' ');
tds.eq(3).html(''); //
$("#demoList").html('');
return delete this.files[index]; //
}
this.error(index, upload);
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html(' ');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //
}
})
});
function noFile() {
var content = $("#demoList").html();
if (content== null || content == 0) {
layer.alert(" ")
}
}
コードには既に詳しいコメントがあります.不明な点があればメッセージをください.