使用jQuery的文件上传进度条

Question

使用jQuery的文件上传进度条我正在尝试在我的项目中实现Ajax文件上传功能。为此，我使用jQuery；我的代码使用Ajax提交数据。我还想实现一个文件上传进度条。我该怎么做？有没有方法来计算已经上传了多少，这样我就可以计算上传的百分比并创建一个进度条了吗？

Answer 1

这个问题与jQuery表单插件..如果您正在寻找纯jQuery解决方案，从这里开始..没有针对所有浏览器的总体jQuery解决方案。所以你必须使用插件。我在用Drozone.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.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来设计进度栏.。

Answer 2

我只在jQuery中这样做：

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();

    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        percentComplete = parseInt(percentComplete * 100);
        console.log(percentComplete);

        if (percentComplete === 100) {

        }

      }
    }, false);

    return xhr;
  },
  url: posturlfile,
  type: "POST",
  data: JSON.stringify(fileuploaddata),
  contentType: "application/json",
  dataType: "json",
  success: function(result) {
    console.log(result);
  }});

Answer 3

我在我的项目中使用了以下内容。你也可以试试。

ajax = new XMLHttpRequest();ajax.onreadystatechange = function () {

    if (ajax.status) {

        if (ajax.status == 200 && (ajax.readyState == 4)){
            //To do tasks if any, when upload is completed
        }
    }}ajax.upload.addEventListener("progress", function (event) {

    var percent = (event.loaded / event.total) * 100;
    //**percent** variable can be used for modifying the length of your progress bar.
    console.log(percent);});ajax.open("POST", 'your file upload link', true);ajax.send(formData);//ajax.send is for uploading form data.