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>

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

问题描述

1 个解决方案

解决方案1
2 2015-07-30 11:17:12

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

问题描述

1 个解决方案

解决方案1 2 2015-07-30 11:17:12

解决方案1
2 2015-07-30 11:17:12