且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

JQuery文件上传在单个发布请求中发送每个文件?

更新时间:2022-10-30 08:29:02

您可能要尝试程序化文件上传 send 方法将确保只发出一个请求。



基本上保存一个 filelist 变量,每更新一次 fileuploadadd callback,然后使用 filelist 用于 send 方法。 例如:


$ b $
  $ document.ready(function(){
var filelist = [];
$('#form') 。(fileuploadadd,function(e,data){
for(va).fileupload({
... // your fileupload options
) r i = 0; i filelist.push(data.files [i])
}
})

$('#button' {
$('#form')。fileupload('send',{files:filelist});
})

})
$ $ b $

它的灵感来自于这个问题

我发现它很有用的原因是即使您设置 singleFileUploads false code>,如果你做了多个单独的选择,他们仍然会被发送每个请求,如作者自己在此GitHub问题


My problem is simple and complex same time:

Im tryin to upload files using jQuery fileUpload library with spring mvc controller as server side, but my files are being uploaded by one request each. What i want is posting them ALL in ONE request.

I have tried singleFileUploads: false option but its not working, if i pass 4 files to upload, the method responsible for handling the post is called 4 times.

Im using this form to post files:

<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 method to upload files:

$('#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')
                });

And handler method :

@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;
    }

I would really need an assistance here :( Files should be loaded in one request, thats why im doing the iterator, but its just not working.

ps. Sorry for my terrible english :(

You may want to try Programmatic file upload instead. The send method will ensure only one request is issued.

Basically keep a filelist variable, update it everytime fileuploadadd callback happens, then use this filelist for the send method.

For example:

$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});
    })

})

It is inspired by this question.

The reason I found it useful is even if you set singleFileUploads to false, if you do multiple individual selections, they will still be sent with individual requests each, as the author said himself in this GitHub issue