layui 다 중 파일 한꺼번에 업로드 사례
<div class="layui-upload" style="">
<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>
<br/>
<br/>
<button type="button" class="layui-btn" id="testListAction"> </button>
</div>
layui 는 클릭 할 때마다 파일 을 변수 에 넣 으 면 됩 니 다. layui 가 업로드 할 필요 가 없습니다.순환 해서 인 터 페 이 스 를 여러 번 바 꿨 기 때문이다.
var files;
layui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload;
//
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#testList'
, accept: 'file'
, multiple: true
, auto: false
, bindAction: '#testListAction'
, choose: function (obj) {
files = this.files = obj.pushFile(); //
//
obj.preview(function (index, file, result) {
var tr = $(['+ index + '">'
, '' + file.name + ''
, '' + (file.size / 1024).toFixed(1) + 'kb'
, ' '
, ''
, ''
, ''
, ''
, ''].join(''));
//
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 ,
});
demoListView.append(tr);
});
}
});
});
그리고 files 안에 많은 파일 이 들 어 있 습 니 다. 사용자 정의 from data 로 ajax 로 한꺼번에 보 냅 니 다.
$("#testListAction").on("click", function () {
var form = new FormData();
for (let i in files) {
form.append("files", files[i]);
}
form.append("devEstateId", fileToken);
form.append("tm",new Date().getTime());
var index = layer.load(0, {
shade: false}); //0 , 0-2
$.ajax({
url: httpurl + '/estate/devUpload',
type: "post",
dataType: "json",
async: false,
contentType: false,
processData: false,
data: form,
success: function (result) {
if (result.code == 200) {
layer.msg(" !", {
icon: 6});
fileToken = null;
ifclose();
} else if (result.code == 500) {
layer.msg(result.msg, {
icon: 5});
}
}
})
});
백 스테이지 에서 바로 대응 하 는 이름 으로 받 아주 시 면 됩 니 다.
public Object devUpload(@RequestParam("files") MultipartFile[] files, String devEstateId, HttpServletRequest request) {
오케이 완료
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Is Eclipse IDE dying?In 2014 the Eclipse IDE is the leading development environment for Java with a market share of approximately 65%. but ac...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.