6

我的问题既简单又复杂：

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

我真的需要帮助:(文件应该在一个请求中加载，这就是我做迭代器的原因，但它只是不起作用。

附言。对不起我糟糕的英语:(

4

1 回答 1

7

您可能想改用程序化文件上传。该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});
    })

})

它受到这个问题的启发。

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

于 2013-12-31T16:02:10.523 回答