Question

我有一个代码，使用FileReader将多个文件发送到服务器以显示图像，并通过ajax发送FormData。

我的代码有效，问题是显示多个进度条。如果我只选择一个文件，它就可以工作。

但如果我选择多个文件，它会显示上一个进度条中所有文件的进度。

有人可以帮忙吗？

(function () {
var input = document.getElementById("images")

function showUploadedItem (file, id) {

    var reader = new FileReader();
    reader.onload = (function(theFile) {
            return function(e) {
                var template = '<li>'+
                                    '<img src="'+e.target.result+'">'+
                                    '<br />'+
                                    '<progress min="0" max="100" value="0" id="'+id+'"></progress>'+
                               '</li>';     
                $("#image-list").append(template);
            };
    })(file);

    reader.readAsDataURL(file);     
}   

input.addEventListener("change", function (evt) {

    for (var i=0, j=this.files.length; i<j; i++) {
        file = this.files[i];

        formdata = new FormData();          
        formdata.append("images[]", file);

        var xhr = new XMLHttpRequest();
            xhr.id = "progress_" + Math.floor((Math.random() * 100000));
            xhr.addEventListener("loadstart", function(e){
                showUploadedItem(file, xhr.id);
            });/*           
            xhr.addEventListener('progress', function(e) {

            }, false);*/
            xhr.upload.onprogress = function(e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;
                $("#" + xhr.id).attr('value',  Math.floor((e.loaded / e.total) * 100) )
            };
            /*xhr.onreadystatechange = function(e) {
                if ( 4 == this.readyState ) {
                    console.log(['xhr upload complete', e]);
                }
            };*/
            xhr.open('post', 'upload.php', true);
            xhr.send(formdata);

    }

}, false);}());

我的Php代码：

foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
    $name = $_FILES["images"]["name"][$key];
    move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}} echo "<h2>Successfully</h2>";

我的HTML;

    <div id="main">
    <div style="padding-bottom:10px">
        <input type="file" name="images" id="images" multiple />
    </div>

    <ul id="image-list"></ul>
    <br style="clear:both">
</div>

Answer 1

您有一个闭包问题，使用this而不是xhr来引用事件回调中的当前XMLHttpRequest对象;

function(e){
    showUploadedItem(file, this.id);
});
function(e) {
    var done = e.position || e.loaded, total = e.totalSize || e.total;
    $("#" + this.id).attr('value',  Math.floor((e.loaded / e.total) * 100) )
}

HTML5文件上传有多个进度

1 个答案: