layui 다 중 파일 한꺼번에 업로드 사례

20852 단어 자바jquery
잔말 말고 바로 시작 해.
	<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) {
     

오케이 완료

좋은 웹페이지 즐겨찾기