AJAX：多个文件分别上传

Question

我正在使用 Jquery 和 Ajax 配置多文件上传，这里是源代码。 HTML：

<div id="dropzone-zone">
    <button type="submit" class="btn btn-primary btn-xs" id="add_file" name="add_file" form="upload-form" style="display:none;">Subir archivos</button>
    <form action="" id="upload-form" method="post" enctype="multipart/form-data">
        <div id="dropzone" class="drop-zone" style="display:none;">
            <span class="drop-zone__prompt">Haga click o arrastre los archivos que desea subir.</span>
            <input type="file" name="file-upload[]" style="display:none;" id="file-upload" class="drop-zone__input" multiple>
        </div>
    </form>
</div>

JS：

const inputElement = document.getElementById("file-upload");
const dropZoneElement = document.getElementById("dropzone");
dropZoneElement.addEventListener("dragover", (e) => { e.preventDefault(); });
dropZoneElement.addEventListener("drop", (e) => {
    e.preventDefault();
    inputElement.files = e.dataTransfer.files;
    dropZoneElement.querySelector(".drop-zone__prompt").remove();

    for(var i=0; i<inputElement.files.length; i++) {
        var file = inputElement.files[i];
        var formdata = new FormData();
        formdata.append("file-upload", file);
        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", function (event){
            if(event.lengthComputable){
                var percent = (event.loaded / event.total) * 100;
                document.getElementById("load-progress").value = Math.round(percent);
            }
        }, false);
        ajax.open("POST", "pruebas.php");
        ajax.send(formdata);
    }
    //document.getElementById('add_file').click();
});

使用此代码，我希望使用多个文件，首先处理第一个文件，上传到 pruebas.php 中定义的位置，同时完成进度条。 在第一个文件之后，从第二个文件开始，上传它并完成它的栏。 第三和第四等； 直到全部完成，然后提交表单并完成重定向。

现在它正在工作，我的意思是将文件上传到服务器，但我无法处理上传进度条，因为它不等待第一次上传结束，我不知道如何评估结束upalods 来确定我什么时候必须提交表格。

有人可以解释一下我需要改变什么，或者一些相关的帖子吗？

提前致谢。

Answer 1

XMLHttpRequest.open()默认是异步的。 这意味着，请求已发送并且代码不会停止。 您可以将.open(METHOD, URL, ASYNC)异步中的属性设置为 false，因此.send()方法在收到响应之前不会返回。 这将导致 for 循环等待上传完成。

我在下面编辑了您的代码，我只是在.open()中添加了另一个参数，该参数确定方法应该异步执行。

const inputElement = document.getElementById("file-upload");
const dropZoneElement = document.getElementById("dropzone");
dropZoneElement.addEventListener("dragover", (e) => { e.preventDefault(); });
dropZoneElement.addEventListener("drop", (e) => {
    e.preventDefault();
    inputElement.files = e.dataTransfer.files;
    dropZoneElement.querySelector(".drop-zone__prompt").remove();

    for(var i=0; i<inputElement.files.length; i++) {
        var file = inputElement.files[i];
        var formdata = new FormData();
        formdata.append("file-upload", file);
        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", function (event){
            if(event.lengthComputable){
                var percent = (event.loaded / event.total) * 100;
                document.getElementById("load-progress").value = Math.round(percent);
            }
        }, false);


        // Changed the parameter for 'async' to false
        ajax.open("POST", "pruebas.php", false);


        ajax.send(formdata);
    }
    //document.getElementById('add_file').click();
});