带进度条的文件上传 - Javascript

文件上传是Web开发中常见的操作。当要上传大文件或者网络不稳定时，上传过程可能会非常耗时。为了提升用户体验，我们可以使用带有进度条的文件上传功能来显示上传进度，让用户清楚地知道当前操作的进程。

实现思路

要实现带有进度条的文件上传功能，我们可以使用JavaScript和HTML5的File API。具体步骤如下：

1. 获取文件对象
2. 将文件分割为多个块，每个块大小为固定值，比如1MB
3. 上传每个块，并显示上传进度
4. 服务器接收每个块，并合并成完整文件

代码实现

下面是一个基于jQuery的示例代码，可以实现带有进度条的文件上传功能：

// 选取文件
$('#fileInput').on('change', function () {
  var file = this.files[0];

  // 将文件分割为多个块，每个块大小为1MB
  var chunkSize = 1 * 1024 * 1024;
  var chunks = Math.ceil(file.size / chunkSize);
  var currentChunk = 0;

  // 上传每个块，并显示上传进度
  function uploadChunk() {
    var start = currentChunk * chunkSize;
    var end = Math.min(start + chunkSize, file.size);
    var formData = new FormData();
    formData.append('file', file.slice(start, end));

    $.ajax({
      type: 'POST',
      url: '/upload',
      data: formData,
      processData: false,
      contentType: false,
      xhr: function () {
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            var percent = Math.round((e.loaded + start) / file.size * 100);
            $('#uploadProgress').val(percent);
            $('#uploadPercentage').html(percent + '%');
          }
        }, false);
        return xhr;
      },
      success: function () {
        currentChunk++;
        if (currentChunk < chunks) {
          uploadChunk();
        } else {
          $('#uploadPercentage').html('上传完成!');
        }
      },
      error: function () {
        $('#uploadPercentage').html('上传失败!');
      }
    });
  }

  // 开始上传第一个块
  uploadChunk();
});

其中，用jQuery监听了一个id为fileInput的input元素的change事件，当用户选择完文件后，首先计算文件的块数。然后，在上传每个块的过程中，使用xhr.upload.addEventListener监听了progress事件，以便计算出上传进度。最后，当上传完成后，显示“上传完成”，否则显示“上传失败”。

总结

带有进度条的文件上传功能可以提升用户体验，让用户更清楚地知道上传进度。本文中提到的实现思路和示例代码，可以帮助开发者快速地实现该功能。