如何显示在AJAX文件上传进度条 [英] How to show progress bar in ajax file upload

问题描述

我的code后Ajax请求，但它没有显示进度条。请帮忙纠正code，以显示工作进度栏。

  $（文件）。就绪（函数（）{
    $（＃uploadbutton）。点击（函数（）{
    变种文件名= $（＃FILE_PATH $ I）VAL（）。 //获取表单数据;

    $阿贾克斯（{
      类型：HTML，
      网址：share.php，// onwhich阿贾克斯后的数据;
      ENCTYPE：多部分/表单数据，
      数据： {
        文件：文件名
      }，
      成功：函数（）{
        警报（数据上传）;
      }
    }）;
 }）;
}）;
 

解决方案

@whitneyit：我们可以使用XHR：AJAX功能来跟踪文件上传这样的事情

  $。阿贾克斯（{
                网址：处理器/ FileUploader.ashx文件名='+ file.name，//服务器脚本来处理数据
                键入：POST，
                XHR：函数（）{
                    myXhr = $ .ajaxSettings.xhr（）;
                    如果（myXhr.upload）{
                        myXhr.upload.addEventListener（进步，progressHandlingFunction，假）;
                    }
                    返回myXhr;
                }，
                成功：函数（结果）{
                    //。如果您需要执行一些任务的成功。
                }，
                数据：文件，
                缓存：假的，
                的contentType：假的，
                过程数据：假的
            }）;
            功能progressHandlingFunction（五）{
                如果（e.lengthComputable）{
                    VAR S = parseInt函数（（e.loaded / e.total）* 100）;
                    $（＃进步+ currFile）的.text（S +％）;
                    $（＃progbarWidth+ currFile）.WIDTH（S +％）;
                    如果（S == 100）{
                        triggerNextFileUpload（）;
                    }
                }
            }
 

该解决方案的详细解释，是这里显示

My code post ajax request but it is not showing a progress bar. Please help to correct the code to show a working progress bar.

$(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: ");
      }
    });
 });
});

解决方案

@whitneyit : we can use xhr: function of ajax to track the file upload something like this

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

Detailed explanation of this solution is shown here

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