javascript - 如何在ajax jquery中排队文件上传？

Question

<script>
funcupload(i) {
var formData = new FormData();
files = $("#upload").get(0).files;

formData.append("upfiles[]", files[i]);

$.ajax({
    url:"upload.php",
    type: 'post',
    data: formData,
    cache: false,
    processData: false,
    contentType: false,
    success:function(data) {
alert("Complete");
i++;
}
}
</script>

<input type=\"file\" id=\"upload\" name=\"upfiles[]\" multiple>
<input type=\"button\" value=\"Upload\" name=\"upload\" onclick=\"funcupload(0)\">

我想排队上传文件。在我上面的代码中，当第一个文件上传时，第二个文件处于待处理状态。但是，如果在选择文件后再次单击上传按钮，则第一个文件将同时开始上传，并将第一个文件添加到上次单击上传按钮的位置。

如何对文件的 ajax 上传进行排队，或者换句话说，如何将下一个文件添加到当前的 ajax？

Answer 1

我认为你想做的事情:

• 用户选择要上传的 4 个文件。
• 用户点击按钮
• 您想对每个文件进行 ajax 调用，但它们不能重叠

如果是这种情况，那么您可以这样做:

var filesToUpload = null;

var uploadNextFile(counter)
{
    $.ajax({
        url:"upload.php",
        type: 'post',
        data: files[i],
        cache: false,
        processData: false,
        contentType: false,
        success:function(data) {
            if (counter < filesToUpload.length)
               uploadNextFile(counter++);
            else
               filesToUpload = null;

        }
    }
}

现在，当单击提交按钮时，您将调用 uploadNextfile() 并传递文件和计数器 0。

如果用户添加文件，您可以检查filesToUpload是否为空。如果不为空，则可以添加文件，代码将继续运行:

filesToUpload.push(/*extra files*/);

如果为空，则只需再次调用该函数即可。