jquery from 大文件上传显示进度条

在 jQuery 中实现大文件上传并显示进度条可以使用 XMLHttpRequest 对象和 FormData 对象来实现。以下是一个简单的示例代码：

HTML：

<input type="file" id="fileInput">
<button id="uploadButton">上传</button>
<div id="progressBar"></div>

JavaScript：

$(document).ready(function() {
  $('#uploadButton').click(function() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    var formData = new FormData();
    formData.append('file', file);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);

    xhr.upload.onprogress = function(e) {
      if (e.lengthComputable) {
        var percent = Math.round((e.loaded / e.total) * 100);
        $('#progressBar').css('width', percent + '%').text(percent + '%');
      }
    };

    xhr.onload = function() {
      if (xhr.status === 200) {
        // 上传成功
        $('#progressBar').text('上传完成');
      } else {
        // 上传失败
        $('#progressBar').text('上传失败');
      }
    };

    xhr.send(formData);
  });
});

在上面的代码中，我们首先获取文件输入框的文件，然后创建一个 FormData 对象，并将文件添加到其中。接下来，我们创建一个 XMLHttpRequest 对象，并设置请求的方法、URL 和异步标志。然后，我们通过监听 `xhr.upload.onprogress` 事件来获取上传进度，并更新进度条的宽度和文本。最后，我们监听 `xhr.onload` 事件，在上传完成后进行相应的处理。

请注意，上述代码中的 `upload.php` 是一个示例的服务器端处理文件上传的脚本，你需要根据自己的实际情况进行相应的修改。