用jQuery文件上传进度条 [英] File upload progress bar with jQuery

问题描述

我试图在我的项目中实现一个AJAX文件上传功能。我正在使用jQuery;我的代码使用AJAX提交数据。我也想实现一个文件上传进度条。我该怎么做？有什么方法可以计算出已经上传了多少，这样我就可以计算上传的百分比并创建一个进度条了？

解决方案

注意：这个问题与 jQuery表单插件。如果您正在寻找纯粹的jQuery解决方案，请从这里开始 。
所有浏览器都没有整体的jQuery解决方案。所以你必须使用一个插件。我正在使用 dropzone.js ，这对旧版浏览器来说是一个简单的回退。你喜欢哪个插件取决于你的需求。这里有很多比较好的帖子，比如这个 ，此或此。

从示例：

jQuery：

  $（function（）{
 
 var bar = $（'。bar'）; 
 var percent = $（'。percent'）; 
 var status = $（'＃status'）; 
 
 $（'form'）。ajaxForm（{
 beforeSend：function（）{
 status.empty（）; 
 var percentVal ='0％'; 
 bar.width （percentVal）; 
 percent.html（percentVal）; 
}，
 uploadProgress：function（event，position，total，percentComplete）{
 var percentVal = percentComplete +'％ ; 
 bar.width（percentVal）; 
 percent.html（percentVal）; 
}，
 complete：function（xhr）{
 status.html（xhr。 responseText）; 
} 
}）; 
}）; 
  

html：

 < form action =file-echo2.phpmethod =postenctype =multipart / form-data> 
< input type =filename =myfile>< br> 
< input type =submitvalue =上传文件到服务器> 
< / form> 
 
< div class =progress> 
< div class =bar>< / div> 
< div class =percent> 0％< / div> 
< / div> 
 
< div id =status>< / div> 
  

您必须使用css样式化进度条...

I am trying to implement an AJAX file upload feature in my project. I am using jQuery for this; my code submits the data using AJAX. I also want to implement a file upload progress bar. How can I do this? Is there any way to calculate how much has already been uploaded so that I can calculate the percentage uploaded and create a progress bar?

解决方案

Note: This question is related to the jQuery form plugin. If you are searching for a pure jQuery solution, start here. There is no overall jQuery solution for all browser. So you have to use a plugin. I am using dropzone.js, which have an easy fallback for older browsers. Which plugin you prefer depends on your needs. There are a lot of good comparing post out there, like this, this or this.

From the examples:

jQuery:

$(function() {

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');

    $('form').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });
}); 

the html:

<form action="file-echo2.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="status"></div>

you have to style the progressbar with css...

这篇关于用jQuery文件上传进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！