jquery上传文件控件并显示进度条

原创

mob64ca12d7c9ee 2023-08-17 05:41:19 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d7c9ee的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现jquery上传文件控件并显示进度条

流程图

pie
title 文件上传流程
"前端" : 50.0
"后端" : 50.0

ER图

erDiagram
    图片上传 ||--o 文件表 : 上传
    文件表 ||--o 图片 : 保存

步骤

步骤	描述
1	前端页面设计，包含文件选择按钮和进度条显示区域
2	通过jQuery选择文件按钮的change事件，获取选中的文件对象
3	使用FormData对象创建一个表单对象，并将选中的文件对象添加到表单中
4	使用jQuery的ajax方法发送表单数据到后端
5	后端接收到文件数据后，保存文件到指定的目录
6	后端返回上传进度给前端
7	前端根据后端返回的进度数据更新进度条显示区域

代码实现

HTML部分

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

JavaScript部分

// 选中文件后触发change事件
$('#fileInput').on('change', function() {
  // 获取选中的文件对象
  var file = $(this)[0].files[0];
  
  // 创建FormData对象
  var formData = new FormData();
  // 将文件对象添加到FormData对象中
  formData.append('file', file);

  // 发送文件数据到后端
  $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    xhr: function() {
      // 创建XHR对象，并重写upload的progress事件
      var xhr = $.ajaxSettings.xhr();
      xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
          // 计算上传进度
          var progress = Math.round((e.loaded / e.total) * 100);
          // 更新进度条显示
          $('#progressBar').css('width', progress + '%');
          $('#progressBar').text(progress + '%');
        }
      };
      return xhr;
    },
    success: function(response) {
      // 文件上传成功
    },
    error: function() {
      // 文件上传失败
    }
  });
});

后端代码

const express = require('express');
const app = express();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), function(req, res) {
  // 文件上传完成后的处理逻辑
  res.send('Upload Success');
});

app.listen(3000, function() {
  console.log('Server started on port 3000');
});