Question

我想建立一个图片上传网站，但是当我尝试向图像添加进度条时我遇到了问题（只有当我有多个图像时才会出现此问题）。如果我上传的图片超过1张，则仅为一张图片提供进度条。

var uuid,formData;
for (var i = 0; i < input.length; i++) {
    uuid = createUUID();
    formData = new FormData();
    var reader = new FileReader();
    /*
       Getting thumbnail of the uploaded image and adding a progress bar
       Here the problem with the progress bar it always create a div with
       same id: 'bar'+i (the i not changing and always stay the same)
    */
    reader.onload = function (e) {
        var li = document.createElement("li");
        li.innerHTML = "<img src='" + this.result + "'/><div class='progress'><div id='bar" + i + "' class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: 0%;'>0%</div></div><a href='images/" + uuid + "' target='_blank'>Direct link</a>";
        ul.appendChild(li);
    }
    reader.readAsDataURL(input[i]);
    // Add the image to the form
    formData.append('images[]', input[i], uuid);
    // HTTP request to upload each image
    var http = new XMLHttpRequest();
    http.open("POST", "upload.php", true);
    http.upload.onprogress = function (e) {
        if (e.lengthComputable) {
            var percentage = (e.loaded / e.total) * 100;
            document.getElementById('bar' + 1).style.width = percentage + "%";
        }
    };

    http.onerror = function () {
        alert('An error occurred while submitting the form. Maybe your file is too big');
    };
    http.onload = function () {
        document.getElementById("bar" + 1).className += " progress-bar-success";
    };
    http.send(formData);
}

Answer 1

试试这个，

var uuid,formData,http,httpRequests = [];
for (var i = 0; i < input.length; i++) {
    uuid = createUUID();
    formData = new FormData();
    var reader = new FileReader();
    /*
       Getting thumbnail of the uploaded image and adding a progress bar
       Here the problem with the progress bar it always create a div with
       same id: 'bar'+i (the i not changing and always stay the same)
    */
    reader.onload = function (e) {
        var li = document.createElement("li");
        li.innerHTML = "<img src='" + this.result + "'/><div class='progress'><div id='bar" + i + "' class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: 0%;'>0%</div></div><a href='images/" + uuid + "' target='_blank'>Direct link</a>";
        ul.appendChild(li);
    }
    reader.readAsDataURL(input[i]);
    // Add the image to the form
    formData.append('images[]', input[i], uuid);

    // HTTP request to upload each image
    http = new XMLHttpRequest();
    http.open("POST", "upload.php", true);
    http.upload.onprogress = function (e) {
        if (e.lengthComputable) {
            var percentage = (e.loaded / e.total) * 100;
            document.getElementById('bar' + 1).style.width = percentage + "%";
        }
    };

    http.onerror = function () {
        alert('An error occurred while submitting the form. Maybe your file is too big');
    };
    http.onload = function () {
        document.getElementById("bar" + 1).className += " progress-bar-success";
    };
    http.send(formData);

    // push the http request into the array
    httpRequests.push(http);
}

我没有尝试过，因为我没有完整的设置，但我希望这有效：）

让我知道。

使用进度条上传多个图像

1 个答案: