AJAX 上传显示多个文件上传中仅文件的进度

Question

请帮我更改下面的代码。我从 HTML 上传了多个文件。 ajax 将所有上传的文件发布到一个 php 脚本，该脚本向进度函数发送反馈。问题是所有三个进度条都只监听一个文件上传。

<html>
<head>
<title>PHP AJAX Multiple Image Upload</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <SCRIPT SRC="upload.js"></SCRIPT>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div class="gallery-bg">
<form id="uploadForm" action="" method="post">
<div id="gallery">No Images in Gallery</div>
<div id="uploadFormLayer">
<p class="txt-subtitle">Upload Multiple Image:</p>
<p><input name="userImage[]" type="file" class="inputFile" /><p>
    <div class="progress">
        <div class="progress-bar" style="width:0%"></div>
    </div>

<p><input name="userImage[]" type="file" class="inputFile" /><p>
    <div class="progress">
        <div class="progress-bar" aria-valuenow="0" aria-valuemin="0"
             aria-valuemax="100" style="width: 0%">

        </div>
    </div>
<p><input name="userImage[]" type="file" class="inputFile" /><p>
    <div class="progress">
        <div class="progress-bar" style="width: 0%;">
        </div>
    </div>

<p><input type="submit" value="Submit" class="btnUpload"  /></p>
</div>
</form>
</div>
</body>
</html>

$('.btnUpload').click(function(){
    //submit all form
    $('form').submit();
});
$(document).on('submit','form',function(e){
    e.preventDefault();

    $form = $(this);

    uploadImage($form);

});

function uploadImage($form) {
    alert("in");
    $('.progress-bar')
    
    var formdata = new FormData($form[0]); //formelement
    var request = new XMLHttpRequest();

    //progress event...
    request.upload.addEventListener('progress', function (e) {
        var percent = Math.round(e.loaded / e.total * 100);
        $('.progress-bar').width(percent + '%').html(percent + '%');
    });
    //progress completed load event
    request.addEventListener('load', function (e) {
        $('.progress-bar').html('upload completed....');
         $('#gallery').hide();
    });

    request.open('post', 'upload.php');
    request.send(formdata);

    $form.on('click', '.cancel', function () {
        request.abort();

        $('.progress-bar')
            .html('upload aborted...');
    });
}

Answer 1

如果您的目标是 HTML5，您可以单独访问每个文件的文件大小并将其与 e.loaded 进行比较，请尝试以下操作：

请注意，提供的代码不会验证每个文件输入，您需要添加相关验证

如果您想查看进度，请不要使用小文件。

请查看工作示例：https://jsfiddle.net/n2exsLb7/5/

function postFile() {
    var formdata = new FormData();

    formdata.append('file1', $('#file1')[0].files[0]);
    formdata.append('file2', $('#file2')[0].files[0]);
    formdata.append('file3', $('#file3')[0].files[0]);

    var request = new XMLHttpRequest();

    request.upload.addEventListener('progress', function (e) {
        var file1Size = $('#file1')[0].files[0].size;
        var file2Size = $('#file2')[0].files[0].size;
        var file3Size = $('#file3')[0].files[0].size;

        if (e.loaded <= file1Size) {
            var percent = Math.round(e.loaded / file1Size * 100);
            $('#progress-bar-file1').width(percent + '%').html(percent + '%');
        } else if (e.loaded > file1Size && e.loaded <= (file1Size + file2Size)){
           $('#progress-bar-file1').width(100 + '%').html(100 + '%');
           var percent = Math.round((e.loaded / (file1Size + file2Size) * 100));
           $('#progress-bar-file2').width(percent + '%').html(percent + '%');
        } else if (e.loaded > (file1Size + file2Size) && e.loaded <= (file1Size + file2Size + file3Size)) {
           $('#progress-bar-file1').width(100 + '%').html(100 + '%');
           $('#progress-bar-file2').width(100 + '%').html(100 + '%');
           var percent = Math.round(e.loaded / (file1Size + file2Size + file3Size) * 100);
           $('#progress-bar-file3').width(percent + '%').html(percent + '%');
        } else if (e.loaded > (file1Size + file2Size + file3Size)) {
           $('#progress-bar-file1').width(100 + '%').html(100 + '%');
           $('#progress-bar-file2').width(100 + '%').html(100 + '%');
           $('#progress-bar-file3').width(100 + '%').html(100 + '%');
        }

        if(e.loaded == e.total){
           $('#progress-bar-file1').width(100 + '%').html(100 + '%');
           $('#progress-bar-file2').width(100 + '%').html(100 + '%');
           $('#progress-bar-file3').width(100 + '%').html(100 + '%');
       }
  });   

  request.open('post', '/echo/html/');
  request.timeout = 45000;
  request.send(formdata);
}

您必须相应地更新文件的 ID 和进度 ID，请参阅：

  <input id="file1" name="userImage[]" type="file" class="inputFile" />
  <div class="progress">
    <div id="progress-bar-file1" class="progress-bar" style="width:0%"></div>
  </div>

  <input id="file2" name="userImage[]" type="file" class="inputFile" />     
  <div class="progress">
    <div id="progress-bar-file2" class="progress-bar" style="width: 0%"> </div>
  </div>
  <input id="file3" name="userImage[]" type="file" class="inputFile" />
  <div class="progress">
    <div id="progress-bar-file3" class="progress-bar" style="width: 0%;"></div>
  </div>