基于ajax实现文件上传并显示进度条

下面是基于ajax实现文件上传并显示进度条的完整攻略：

1. 准备工作

在前端实现基于ajax的文件上传需要以下几个工具/库：

FormData对象：用于创建一个表单数据对象，方便把文件和其他数据打包发送到服务器端。
XMLHttpRequest对象：用于创建异步请求，可以通过它向服务器端发送数据。
FileReader对象：用于读取本地文件并把它转换成base64格式或者二进制格式，方便在前端做文件预览和文件上传。

2. 实现过程

2.1 上传文件

首先，在html页面上布置一个文件上传组件。这里以一个简单的input元素为例：

<input type="file" id="fileInput" />

接下来，在js文件中，绑定文件上传事件：

function handleFileSelect(event) {
  event.preventDefault();
  var files = event.target.files;
  var reader = new FileReader();
  reader.onload = function(event) {
    var formData = new FormData();
    formData.append('file', files[0]);
    uploadFile(formData);
  };
  reader.readAsDataURL(files[0]);
}

document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);

当用户选择文件后，会触发handleFileSelect函数，在这里我们创建了一个FileReader对象来读取文件，读取完成后，把文件数据和其他数据打包成一个FormData对象，并传递给一个名为uploadFile的函数。

接下来，实现uploadFile函数：

function uploadFile(formData) {
  var xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', uploadProgressHandler, false);
  xhr.addEventListener('load', uploadCompleteHandler, false);
  xhr.addEventListener('error', uploadErrorHandler, false);
  xhr.addEventListener('abort', uploadAbortHandler, false);
  xhr.open('POST', '/upload', true);
  xhr.send(formData);
}

这个函数的作用是创建并发送一个异步请求到服务器端，其中：

xhr.upload.addEventListener('progress', uploadProgressHandler, false); 配置上传进度事件的回调函数，用于监听上传进度，并显示上传进度条。
xhr.addEventListener('load', uploadCompleteHandler, false); 配置上传完成事件的回调函数，用于获取并处理服务器端返回的结果。
xhr.addEventListener('error', uploadErrorHandler, false); 配置上传出错事件的回调函数，用于处理上传出错的情况。
xhr.addEventListener('abort', uploadAbortHandler, false); 配置上传被中断事件的回调函数，用于处理上传被中断的情况。
xhr.open('POST', '/upload', true); 配置请求方法和请求URL，并设置异步请求为true。
xhr.send(formData); 发送请求，并传入打包好的表单数据。

2.2 实现上传进度条

上面的uploadFile函数中我们配置了一个上传进度事件的回调函数uploadProgressHandler，用于监听上传进度。下面我们来实现这个回调函数：

function uploadProgressHandler(event){
  var percent = event.loaded / event.total * 100;
  console.log('Upload progress: ' + percent.toFixed(2) + '%');
}

这个函数的作用是计算上传进度的百分比，并打印出来，我们可以把它改造一下，把进度显示在一个进度条中：

function uploadProgressHandler(event){
  var percent = event.loaded / event.total * 100;
  var progressBar = document.getElementById('progressBar');
  progressBar.value = percent;
}

在html中，添加一个进度条：

<progress id="progressBar" value="0" max="100"></progress>

现在，文件上传功能和上传进度条都已经实现，可以通过运行到本地服务器的方式进行测试。如果一切正常，上传完成后，上传进度条应该会满。

3. 示例

下面分别给出基于jQuery和基于Vue.js的示例代码：

3.1 基于jQuery的示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>上传文件</title>
  </head>
  <body>
    <input type="file" id="fileInput" />
    <progress id="progressBar" value="0" max="100"></progress>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      function handleFileSelect(event) {
        event.preventDefault();
        var files = event.target.files;
        var reader = new FileReader();
        reader.onload = function(event) {
          var formData = new FormData();
          formData.append('file', files[0]);
          uploadFile(formData);
        };
        reader.readAsDataURL(files[0]);
      }

      function uploadFile(formData) {
        $.ajax({
          url: '/upload',
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          xhr: function() {
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener('progress', uploadProgressHandler, false);
            xhr.addEventListener('load', uploadCompleteHandler, false);
            xhr.addEventListener('error', uploadErrorHandler, false);
            xhr.addEventListener('abort', uploadAbortHandler, false);
            return xhr;
          }
        });
      }

      function uploadProgressHandler(event){
        var percent = event.loaded / event.total * 100;
        var progressBar = document.getElementById('progressBar');
        progressBar.value = percent;
      }

      function uploadCompleteHandler(event){
        alert('上传完成！');
      }

      function uploadErrorHandler(event){
        alert('上传出错！');
      }

      function uploadAbortHandler(event){
        alert('上传被中断！');
      }

      $(document).ready(function() {
        $('#fileInput').change(handleFileSelect);
      });
    </script>
  </body>
</html>

3.2 基于Vue.js的示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>上传文件</title>
  </head>
  <body>
    <div id="app">
      <input type="file" ref="fileInput" @change="handleFileSelect" />
      <progress ref="progressBar" value="0" max="100"></progress>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        methods: {
          handleFileSelect(event) {
            event.preventDefault();
            var files = event.target.files;
            var reader = new FileReader();
            reader.onload = function(event) {
              var formData = new FormData();
              formData.append('file', files[0]);
              this.uploadFile(formData);
            }.bind(this);
            reader.readAsDataURL(files[0]);
          },
          uploadFile(formData) {
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener('progress', this.uploadProgressHandler, false);
            xhr.addEventListener('load', this.uploadCompleteHandler, false);
            xhr.addEventListener('error', this.uploadErrorHandler, false);
            xhr.addEventListener('abort', this.uploadAbortHandler, false);
            xhr.open('POST', '/upload', true);
            xhr.send(formData);
          },
          uploadProgressHandler(event){
            var percent = event.loaded / event.total * 100;
            this.$refs.progressBar.value = percent;
          },
          uploadCompleteHandler(event){
            alert('上传完成！');
          },
          uploadErrorHandler(event){
            alert('上传出错！');
          },
          uploadAbortHandler(event){
            alert('上传被中断！');
          }
        }
      });
    </script>
  </body>
</html>

以上就是基于ajax实现文件上传并显示进度条的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于ajax实现文件上传并显示进度条 - Python技术站