如何在ajax文件上传中显示进度条答案

【问题标题】：How to show progress bar in ajax file upload如何在ajax文件上传中显示进度条
【发布时间】：2013-01-26 05:22:52
【问题描述】：

我的代码发布了 ajax 请求，但没有显示进度条。请帮助更正代码以显示工作进度条。

$(document).ready(function () {
    $("#uploadbutton").click(function () {
    var filename = $("#file_path$i").val(); //get form data;

    $.ajax({
      type: "html",
      url: "share.php",//onwhich post ajax data;
      enctype: 'multipart/form-data',
      data: {
        file: filename
      },
      success: function () {
        alert("Data Uploaded: ");
      }
    });
 });
});

【问题讨论】：

标签： php jquery html css ajax

【解决方案1】：

@whitneyit : 我们可以使用 xhr: ajax 的函数来跟踪文件上传这样的事情

$.ajax({
                url: 'handler/FileUploader.ashx?FileName=' + file.name, //server script to process data
                type: 'POST',
                xhr: function () {
                    myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                    }
                    return myXhr;
                },
                success: function (result) {                    
                    //On success if you want to perform some tasks.
                },
                data: file,
                cache: false,
                contentType: false,
                processData: false
            });
            function progressHandlingFunction(e) {
                if (e.lengthComputable) {
                    var s = parseInt((e.loaded / e.total) * 100);
                    $("#progress" + currFile).text(s + "%");
                    $("#progbarWidth" + currFile).width(s + "%");
                    if (s == 100) {
                        triggerNextFileUpload();
                    }
                }
            }

【讨论】：

【解决方案2】：

这是来自 BlueImp 的 jQuery-File-Upload：

首先下载：https://github.com/blueimp/jQuery-File-Upload/archives/master

现在，上传 js 文件夹。

制作你的 .html：

    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery File Upload Example</title>
    <style>
     .bar {
         height: 18px;
         background: green;
      }
    </style>
    </head>
    <body>
    <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
    <div id="progress">
       <div class="bar" style="width: 0%;"></div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/vendor/jquery.ui.widget.js"></script>
    <script src="js/jquery.iframe-transport.js"></script>
    <script src="js/jquery.fileupload.js"></script>
    <script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }
        });
progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
    });
    </script>
    </body> 
    </html>

我没有对此进行测试，但它应该可以正常工作。如果不是，请告诉我。

可选：在您的 .css 文件中包含 <style></style> 的内容。

可选：在 .js <script src=""></script> 标记中包含 .js。

来源：https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

【讨论】：

【解决方案3】：

不幸的是，$.ajax 方法不返回任何进度信息。

此外，仅使用 HTML 和 JavaScript 没有跨浏览器解决方案。我建议查看Uploadify。

【讨论】：