3

我允许用户将多个 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's 可以做什么利用。）

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

我想这并不少见，但我的搜索结果却出人意料地少。

4

2 回答 2

4

如果您不需要支持 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);
于 2015-08-03T23:56:06.960 回答
0

您总是可以找到所选文件的长度，并通过 AJAX 将它们一一发送。但是，根据您的实现方式，AJAX 会发送并行请求。从您的问题中不清楚您是否正在寻找将在每个文件都成功上传时逐个上传文件的内容，或者您​​是否正在寻找我刚才提到的并行上传。

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

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

于 2013-11-06T21:10:41.733 回答