복붙노트

[SPRING] JQuery 파일 업로드는 각 게시물 요청의 각 파일을 보냅니 까?

SPRING

JQuery 파일 업로드는 각 게시물 요청의 각 파일을 보냅니 까?

내 문제는 간단하고 복잡합니다.

나는 봄 mvc 컨트롤러와 jQuery fileUpload 라이브러리를 사용하여 파일을 업로드하려고 노력하지만 서버 측은 하나의 요청으로 파일을 업로드하고 있습니다. 내가 원했던 것은 하나의 요청으로 그들 모두를 게시하는 것이다.

singleFileUploads : false 옵션을 시도했으나 작동하지 않습니다. 업로드 할 파일이 4 개인 경우 게시물 처리 책임자는 4 번 호출됩니다.

이 양식을 사용하여 파일을 게시하는 임 :

<div class="upload-file-div">
    <b>Choose csv files to load</b> <input id="csvUpload" type="file"
    name="files[] "data-url="adminpanel/uploadCsv" multiple />
</div>
<div id="dropzoneCsv">Or drop files here</div>

<div id="progressCsv">
<div class="bar" style="width: 0%;"></div>
</div>

파일을 업로드하는 Jquery 메서드 :

$('#csvUpload').fileupload(
                {
                    singleFileUploads: false,
                    dataType : 'json',
                    done : function(e, data) {
                        $("tr:has(td)").remove();
                        $.each(data.result, function(index, file) {

                            $("#uploaded-csv").append(
                                    $('<tr/>').append(
                                            $('<td/>').text(file.fileName))
                                            .append(
                                                    $('<td/>').text(
                                                            file.fileSize))
                                            .append(
                                                    $('<td/>').text(
                                                            file.fileType))
                                            .append(
                                                    $('<td/>').text(
                                                            file.existsOnServer))
                                            .append($('<td/>')));
                        });
                    },

                    progressall : function(e, data) {
                        var progress = parseInt(data.loaded / data.total * 100,
                                10);
                        $('#progressCsv .bar').css('width', progress + '%');
                    },

                    dropZone : $('#dropzoneCsv')
                });

핸들러 메소드 :

@RequestMapping(value = "/adminpanel/uploadCsv", method = RequestMethod.POST)
    public @ResponseBody
    List<FileMeta> uploadCsv(MultipartHttpServletRequest request, HttpServletResponse response) {

        // 1. build an iterator
        Iterator<String> itr = request.getFileNames();
        MultipartFile mpf = null;
        List<FileMeta> csvFiles = new ArrayList<FileMeta>();
        // 2. get each file
        while (itr.hasNext()) {

            // 2.1 get next MultipartFile
            mpf = request.getFile(itr.next());
            System.out.println(mpf.getOriginalFilename() + " uploaded! ");

            // 2.3 create new fileMeta
            FileMeta fileMeta = new FileMeta();
            fileMeta.setFileName(mpf.getOriginalFilename());
            fileMeta.setFileSize(mpf.getSize() / 1024 + " Kb");
            fileMeta.setFileType(mpf.getContentType());

            try {
                File dir = new File(Thread.currentThread().getContextClassLoader()
                        .getResource("").getPath()+"CSV");
                if(!dir.exists()) dir.mkdirs();
                File newCSV = new File(dir+"\\"+ mpf.getOriginalFilename());
                if(!newCSV.exists())
                {
                    mpf.transferTo(newCSV);
                    fileMeta.setExistsOnServer(false);
                }
                else fileMeta.setExistsOnServer(true);
            } catch (IllegalStateException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            } catch (IOException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }

            // 2.4 add to files
            csvFiles.add(fileMeta);
        }

        return csvFiles;
    }

난 정말 여기에 도움이 필요합니다 : (파일은 하나의 요청에로드되어야합니다, 왜 it은 iterator를하고 있지만 그저 작동하지 않습니다.

추신. 내 끔찍한 영어에 대한 죄송합니다. (

해결법

  1. ==============================

    1.대신 Programmatic 파일 업로드를 시도 할 수 있습니다. send 메쏘드는 오직 하나의 요청이 발행되도록합니다.

    대신 Programmatic 파일 업로드를 시도 할 수 있습니다. send 메쏘드는 오직 하나의 요청이 발행되도록합니다.

    기본적으로 filelist 변수를 유지하고 fileuploadadd 콜백이 발생할 때마다 업데이트 한 다음 send 메서드에이 파일 목록을 사용합니다.

    예 :

    $document.ready(function(){
        var filelist = [];
        $('#form').fileupload({
        ... // your fileupload options
        }).on("fileuploadadd", function(e, data){
            for(var i = 0; i < data.files.length; i++){
                filelist.push(data.files[i])
            }
        })
    
        $('#button').click(function(){
            $('#form').fileupload('send', {files:filelist});
        })
    
    })
    

    이 질문에서 영감을 얻었습니다.

    내가 유용하다고 판별 한 이유는 singleFileUploads를 false로 설정해도, 개별 선택을 여러 개 수행하는 경우 작성자가이 GitHub 문제에서 스스로 말했듯이 개별 요청마다 계속 전송됩니다.

  2. from https://stackoverflow.com/questions/18701743/jquery-file-upload-sends-each-file-in-individual-post-request by cc-by-sa and MIT license