Question

我允许用户将多个SVG文件上传到我的服务器。

<form target="my_iframe" enctype="multipart/form-data">
    <input name="file" type="file" multiple>
</form>
<div id="message"></div>

但是，有些用户会想要上传大量文件。文件本身相对较小（<200 kB），但可能有几十个，甚至一百个左右。

上传和处理需要很长时间。如果在上传过程中出现任何问题，我们必须重新开始。

我见过有类似问题的网站（例如Facebook，SmugMug）一次只上传一个文件。

没有插件（Sliverlight，Flash等）如何让用户选择一个文件，但对每个文件发出不同的请求？我的目标是IE9 +，Chrome和Firefox。

像

这样的东西

//DOES NOT WORK
$.each($('input').files, function(file, i, files) {
    $('input').files = [file]; //obviously flawed, since this is an Array, not a FileList
    $('#message').text('Uploading ' + i + ' of ' + files.length);
    $('form').submit();
});

（我听说有人说出于安全原因这不起作用，但如果我能缩短FileList的话，我就无法看到我可以做些什么。）

我想我可以使用XHR自己发送多部分编码数据，但如果这是正确的解决方案，我不明白它是如何工作的，也不知道如何格式化它。

我想这不是一种不寻常的情况，但我的搜索量却出乎意料地少了。

Answer 1

如果您不需要支持IE9或更低版本，那么使用FormData是一个选项

var files = $('input').files;

function upload(files, i){
    if(i >= files.length) {
        $('#message').text('Done!');
        return;
    }

    $('#message').text('Uploading ' + (i+1) + ' of ' + files.length);

    var file = files[i];
    var data = new FormData();
    data.append('file',data);
    $.ajax({
        url:'/upload',
        data:data,
        contentType:false,
        processData:false,
        type:'POST',
        success:function(){
            //handle success
        },
        error:function(){
            //handle failure
        },
        complete:function(){
            upload(files, i+1);
        }
    });
}

upload(files);

Answer 2

您始终可以找到所选文件的长度，并通过AJAX逐个发送。但是，根据您的实现方式，AJAX会发送并行请求。从您的问题中不清楚，如果您正在寻找可以逐个上传文件的内容，因为每个文件都已成功上传，或者您正在寻找像我刚才提到的并行上传文件。

但是，无论您从两者中选择什么，您仍然可以包含异常或条件来检查上传失败。

如果您可以发布一些代码，这将有所帮助。

单独上传多个文件

2 个答案: