AJAX上传出的多文件上传只有文件的进展情况 [英] AJAX upload showing progress of only file in multiple file uploads

查看：87 发布时间：2015/11/30 0:15:56 javascript jquery ajax

本文介绍了AJAX上传出的多文件上传只有文件的进展情况的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请帮我改下code。我有多个文件从HTML被上传。阿贾克斯的职位所有上传的文件，它发送反馈进度function.Problem PHP脚本是三个进度条只监听一个文件上传。

＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT; PHP AJAX多图片上传＆LT; /标题＆GT;
    ＆LT;脚本SRC =HTTPS：//$c$c.jquery.com/jquery-2.1.1.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
    ＆所述; SCRIPT SRC =upload.js＆GT;＆所述; / SCRIPT＆GT;
    ＆LT;链接相对=样式类型=文/ CSS的href =style.css文件＆GT;

＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =画廊BG＆GT;
＆LT;形式ID =uploadForm行动=的方法=邮报＆GT;
＆LT; DIV ID =画廊＆gt;在画廊＆LT无图像; / DIV＆GT;
＆LT; DIV ID =uploadFormLayer＆GT;
＆其中，P类=TXT字幕＆GT;载多个图片：＆LT; / P＆GT;
＆LT; P＆GT;＆LT;输入名称=userImage []类型=文件级=INPUTFILE/＆GT;＆LT; P＆GT;
    ＆LT; DIV CLASS =进步＆GT;
        ＆LT; DIV CLASS =进度条的风格=宽度：0％＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;

＆LT; P＆GT;＆LT;输入名称=userImage []类型=文件级=INPUTFILE/＆GT;＆LT; P＆GT;
    ＆LT; DIV CLASS =进步＆GT;
        ＆LT; DIV CLASS =进度条咏叹调 -  valuenow =0的咏叹调 -  valuemin =0
             ARIA-valuemax =100的风格=宽度：0％＆GT;

        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; P＆GT;＆LT;输入名称=userImage []类型=文件级=INPUTFILE/＆GT;＆LT; P＆GT;
    ＆LT; DIV CLASS =进步＆GT;
        ＆LT; DIV CLASS =进度条的风格=宽度：0％;＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;

＆LT; P＆GT;＆LT;输入类型=提交值=提交级=btnUpload/＆GT;＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT; /形式GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

 $（'。btnUpload）点击（函数（）{
    //提交所有形式
    $（形式）提交（）。
}）;
$（文件）。在（'提交'，'形式'，功能（五）{
    即preventDefault（）;

    $形式= $（本）;

    uploadImage（$形式）;

}）;

功能uploadImage（$形式）{
    警报（中）;
    $（'。进度条）
    
    VAR FORMDATA =新FORMDATA（$形式[0]）; // formelement
    VAR请求=新XMLHtt prequest（）;

    //进度事件...
    request.upload.addEventListener（'进步'，功能（五）{
        变种百分比= Math.round（e.loaded / e.total * 100）;
        。$（'。进度条），宽度（百分比+'％'）HTML（百分比+'％'）;
    }）;
    //进度完成加载事件
    request.addEventListener（'负荷'，功能（五）{
        $（进度条。）HTML（上传完成......）。
         $（'＃库）隐藏（）。
    }）;

    request.open（'后'，'upload.php的'）;
    request.send（FORMDATA）;

    $ form.on（'点击'，'.cancel'，函数（）{
        request.abort（）;

        $（'。进度条）
            html的（上传中止......'）;
    }）;
}

解决方案

如果你的目标HTML5可以单独访问每个文件的文件大小，并把它比作 e.loaded 请尝试以下操作：

请注意，所提供的code不验证每个文件输入，你将需要添加相关的验证的

如果你想看到的进展情况，请不要使用小尺寸的文件。

请参见工作示例： https://jsfiddle.net/n2exsLb7/5/

 函数postFile（）{
    VAR FORMDATA =新FORMDATA（）;

    formdata.append（'文件1'，$（'＃文件1'）[0] .files [0]）;
    formdata.append（'file2中'，$（'＃文件2'）[0] .files [0]）;
    formdata.append（'file3的'，$（'＃file3的'）[0] .files [0]）;

    VAR请求=新XMLHtt prequest（）;

    request.upload.addEventListener（'进步'，功能（五）{
        变种file1Size = $（'＃文件1'）[0] .files [0] .size;
        变种file2Size = $（'＃文件2'）[0] .files [0] .size;
        变种file3Size = $（'＃file3的'）[0] .files [0] .size;

        如果（e.loaded＆LT; = file1Size）{
            变种百分比= Math.round（e.loaded / file1Size * 100）;
            。$（'＃进度条，文件1'），宽度（百分比+'％'）HTML（百分比+'％'）;
        }否则如果（e.loaded＆GT; file1Size和放大器;＆安培; e.loaded＆LT; =（file1Size + file2Size））{
           。$（'＃进度条，文件1'），宽度（100 +'％'）HTML（100 +'％'）;
           变种百分比= Math.round（（e.loaded /（file1Size + file2Size）* 100））;
           。$（'＃进度条，文件2'）的宽度（百分比+'％'）HTML（百分比+'％'）;
        }否则如果（e.loaded＆GT;（file1Size + file2Size）及＆安培; e.loaded＆其中; =（file1Size + file2Size + file3Size））{
           。$（'＃进度条，文件1'），宽度（100 +'％'）HTML（100 +'％'）;
           。$（'＃进度条，文件2'），宽度（100 +'％'）HTML（100 +'％'）;
           变种百分比= Math.round（e.loaded /（file1Size + file2Size + file3Size）* 100）;
           。$（'＃进度条，文件3）宽（百分比+'％'）HTML（百分比+'％'）;
        }否则如果（e.loaded＆GT;（file1Size + file2Size + file3Size））{
           。$（'＃进度条，文件1'），宽度（100 +'％'）HTML（100 +'％'）;
           。$（'＃进度条，文件2'），宽度（100 +'％'）HTML（100 +'％'）;
           。$（'＃进度条，文件3）宽（100 +'％'）HTML（100 +'％'）;
        }

        如果（e.loaded == e.total）{
           。$（'＃进度条，文件1'），宽度（100 +'％'）HTML（100 +'％'）;
           。$（'＃进度条，文件2'），宽度（100 +'％'）HTML（100 +'％'）;
           。$（'＃进度条，文件3）宽（100 +'％'）HTML（100 +'％'）;
       }
  }）;

  request.open（'后'，'/回声/ HTML /'）;
  request.timeout = 45000;
  request.send（FORMDATA）;
}

您必须更新你的文件的ID和进步的ID因此，请参阅打击：

 ＆LT;输入ID =文件1NAME =userImage []类型=文件级=INPUTFILE/＆GT;
  ＆LT; DIV CLASS =进步＆GT;
    ＆LT; DIV ID =进度条，文件1级=进度条的风格=宽度：0％＆GT;＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;

  ＆LT;输入ID =文件2NAME =userImage []类型=文件级=INPUTFILE/＆GT;
  ＆LT; DIV CLASS =进步＆GT;
    ＆LT; DIV ID =进度条，文件2级=进度条的风格=宽度：0％＆GT; ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
  ＆LT;输入ID =文件3NAME =userImage []类型=文件级=INPUTFILE/＆GT;
  ＆LT; DIV CLASS =进步＆GT;
    ＆LT; DIV ID =进度条，文件3级=进度条的风格=宽度：0％;＆GT;＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;

Please help me change the code below. I have multiple files being uploaded from the HTML. The ajax the posts all uploaded files to a php script which sends feedback to the progress function.Problem is all three progress bars are listening only for one file upload.

<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...');
    });
}

解决方案

If you are targeting HTML5 you can access the file size of each file individually and compare it to the e.loaded try the following:

please note that the supplied code does not validate each file input, you will need to add the relevant validation

If you want to see the progress please don't use files that are small in size.

Please see working example: 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);
}

You will have to updated your file's id's and progress id's accordingly, please see blow:

  <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上传出的多文件上传只有文件的进展情况的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

AJAX上传出的多文件上传只有文件的进展情况 [英] AJAX upload showing progress of only file in multiple file uploads

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

AJAX上传出的多文件上传只有文件的进展情况 [英] AJAX upload showing progress of only file in multiple file uploads

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭