jQuery File Upload在单独的Post Request中发送每个文件?


问题内容

我的问题既简单又复杂:

我尝试使用带有spring 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;
    }

我在这里真的需要帮助:((文件应在一个请求中加载,这就是为什么即时通讯正在执行迭代器,但其无法正常工作。

ps。对不起,我的英语不好:(


问题答案:

您可能想尝试使用程序化文件上传。该send方法将确保仅发出一个请求。

基本上保留一个filelist变量,在每次fileuploadadd回调发生时对其进行更新,然后将其filelist用于该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});
    })

})

我发现它有用的原因是,即使您将设置singleFileUploadsfalse,如果您进行了多个单独的选择,它们仍将与每个单独的请求一起发送,正如作者在GitHub问题中所说的那样。