如何在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*/);

如果它为空，你可以再次调用该函数。