jquery实现上传文件进度条

下面我将详细讲解“jquery实现上传文件进度条”的完整攻略：

一、前置知识

在开始解释jquery实现上传文件进度条的步骤之前，需要先了解以下一些前置知识：

• HTML Form表单：用于向服务器发送数据
• HTML5 File API：用于对文件进行操作和读取
• FormData对象：用于封装表单数据
• XMLHttpRequest对象：用于向服务器发起异步请求

二、基本原理

当我们上传文件时，浏览器会将文件读取为二进制数据，然后通过HTTP协议将数据传递给服务器。在这个过程中，我们可以利用XMLHttpRequest对象来监控上传文件的进度。具体来说，当上传文件时，我们可以监听XMLHttpRequest对象的progress事件，然后根据事件中的loaded和total属性计算上传文件的进度。

三、具体步骤

以下是jquery实现上传文件进度条的具体步骤：

1. HTML代码

首先需要在HTML代码中添加一个表单，用于上传文件，并添加一个进度条元素。以下是示例代码：

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="上传">
</form>
<div id="progressBar"></div>

2. JS代码

然后需要编写JS代码，用jquery获取表单数据，并使用XMLHttpRequest对象上传文件。在上传过程中，我们监听XMLHttpRequest对象的progress事件，并将已上传的文件大小与文件总大小进行计算，从而得到上传进度的百分比，并更新进度条的显示。以下是示例代码：

$(document).ready(function() {
  $('#uploadForm').submit(function(e) {
    e.preventDefault();
    var formData = new FormData($('#uploadForm')[0]);
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      xhr: function() {
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(e) {
          var loaded = e.loaded;
          var total = e.total;
          var percent = Math.floor(loaded / total * 100);
          $('#progressBar').css('width', percent + '%').text(percent + '%');
        }, false);
        return xhr;
      },
      success: function() {
        alert('上传成功！');
      },
      error: function() {
        alert('上传失败！');
      }
    });
  });
});

其中，formData变量用于封装表单数据，$.ajax方法用于发起异步请求，processData和contentType属性用于禁用jquery对数据的处理，使得上传的数据类型为formData类型，xhr属性用于获取XMLHttpRequest对象并监听progress事件，success和error属性分别处理上传成功和上传失败的情况。

3. PHP代码

最后需要在服务器端编写PHP代码，用于接收上传的文件，并保存文件到服务器。以下是示例代码：

<?php
if ($_FILES['file']['error'] > 0) {
  echo '上传文件错误！';
  exit();
}
$filename = $_FILES['file']['name'];
$tmpname = $_FILES['file']['tmp_name'];
$target = 'uploads/' . $filename;
move_uploaded_file($tmpname, $target);
?>

其中，$_FILES变量用于获取上传的文件信息，包括文件名、文件类型、文件大小、文件临时路径等。如果上传的文件有错误，则输出错误信息。否则，将上传的文件移动到指定的目标文件夹（这里使用uploads目录作为目标文件夹）。

四、示例说明

以上的代码只是简单的示例，实际上在实际应用中还有很多需要优化和完善的地方。以下是两个更加完整和丰富的示例：

示例1：使用Bootstrap样式美化进度条

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="上传">
</form>
<div class="progress">
  <div id="progressBar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>

$(document).ready(function() {
  $('#uploadForm').submit(function(e) {
    e.preventDefault();
    var formData = new FormData($('#uploadForm')[0]);
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      xhr: function() {
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(e) {
          if (e.lengthComputable) {
            var loaded = e.loaded;
            var total = e.total;
            var percent = Math.floor(loaded / total * 100);
            $('#progressBar').css('width', percent + '%').text(percent + '%');
          }
        }, false);
        return xhr;
      },
      success: function() {
        alert('上传成功！');
      },
      error: function() {
        alert('上传失败！');
      }
    });
  });
});

.progress-bar {
  transition: width 0.3s ease;
}

在这个示例中，我们使用了Bootstrap样式来美化进度条的显示效果，同时在JS代码中添加了对lengthComputable属性的判断，避免在上传过程中因为无法获取文件总大小而导致上传进度无法计算的问题。

示例2：使用Promise封装异步请求

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="上传">
</form>
<div id="progressBar"></div>

function uploadFile(url, formData) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function(e) {
      if (e.lengthComputable) {
        var loaded = e.loaded;
        var total = e.total;
        var percent = Math.floor(loaded / total * 100);
        $('#progressBar').css('width', percent + '%').text(percent + '%');
      }
    }, false);
    xhr.addEventListener('load', function() {
      resolve(xhr.responseText);
    }, false);
    xhr.addEventListener('error', function() {
      reject(Error('上传失败！'));
    }, false);
    xhr.open('POST', url);
    xhr.send(formData);
  });
}

$(document).ready(function() {
  $('#uploadForm').submit(function(e) {
    e.preventDefault();
    var formData = new FormData($('#uploadForm')[0]);
    uploadFile('upload.php', formData).then(function(response) {
      alert('上传成功！');
    }).catch(function(error) {
      alert(error.message);
    });
  });
});

在这个示例中，我们使用Promise对象封装了异步上传文件的过程，并返回一个Promise实例。在JS代码中使用这个Promise实例来处理上传成功和上传失败的情况，使得代码更加简洁和易读。