分别上传多个文件

Upload multiple files individually

本文关键字：文件      更新时间：2023-09-26

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

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

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

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

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

没有插件（银光灯、闪光灯等）如何让用户选择一个文件，但对每个文件提出不同的请求？我的目标是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 自己发送多部分编码的数据，但如果这是正确的解决方案，我不明白它是如何工作的，也不明白如何格式化它。

我想这种情况并不少见，但我的搜索结果出奇地少。

如果您不需要支持 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);

您始终可以找到所选文件的长度，并通过 AJAX 逐个发送它们。但是，根据你实现这一点的方式，AJAX 将发送并行请求。从您的问题中不清楚您是否正在寻找能够在每个文件成功上传时逐个上传文件的东西，或者您是否正在寻找我刚刚提到的并行上传。

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

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

相关文章：