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

问题描述

我正在尝试在我的项目中实现 AJAX 文件上传功能.我为此使用 jQuery；我的代码使用 AJAX 提交数据.我还想实现一个文件上传进度条.我怎样才能做到这一点?有什么方法可以计算已经上传了多少，以便我可以计算上传的百分比并创建进度条?

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?

推荐答案

注意: 本题与jQuery 表单插件.如果您正在寻找纯 jQuery 解决方案，从这里开始.没有适用于所有浏览器的整体 jQuery 解决方案.所以你必须使用插件.我正在使用 dropzone.js，它可以轻松地回退到旧版浏览器.您喜欢哪个插件取决于您的需求.那里有很多很好的比较帖子.

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.

来自示例:

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.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>

您必须使用 css 设置进度条的样式...

you have to style the progressbar with css...

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