jQuery 上传进度和 AJAX 文件上传

使用jQuery上传进度和AJAX文件上传

html

javascript
// 获取文件上传的表单
var form = $('#uploadForm')[0];
// 创建一个FormData对象
var formData = new FormData(form);
// 发送AJAX请求
$.ajax({
  url: '/upload',  // 上传的URL地址
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  xhr: function() {
    // 获取XMLHttpRequest对象
    var xhr = new window.XMLHttpRequest();
    
    // 监听上传进度
    xhr.upload.addEventListener('progress', function(evt) {
      if (evt.lengthComputable) {
        // 计算上传进度
        var percentComplete = evt.loaded / evt.total * 100;
        
        // 显示上传进度
        $('#progressBar').css('width', percentComplete + '%');
        $('#progressBar').text(percentComplete + '%');
      }
    }, false);
    
    return xhr;
  },
  success: function(response) {
    // 文件上传成功的处理逻辑
  },
  error: function() {
    // 文件上传失败的处理逻辑
  }
});

javascript
// 引入所需的模块
const express = require('express');
const multer = require('multer');
// 创建Express实例
const app = express();
// 配置Multer中间件
const upload = multer({ dest: 'uploads/' });
// 处理文件上传的接口
app.post('/upload', upload.single('file'), (req, res) => {
  // 上传成功的处理逻辑
  res.send('File uploaded successfully!');
});
// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

javascript
// 发送AJAX请求
$.ajax({
  url: '/upload',  // 上传的URL地址
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  // ...
});