原生js使用FormData上传文件并监听进度(附前后端实现源码)

• 在ajax1.0时代, 是无法直接上传文件的, 到了ajax2.0时代, 新增了FormData, 我们就可以用FormData完成文件的上传

• 以前我们用form表单中的实现文件上传, 但前端无法实时查看上传的进度, 而ajax2.0可以让我们实时监控上传进度

• 下面是一个原生js使用ajax 完成 FormData上传文件, 并实时监听文件上传进度的小Demo, 前后端均已完成代码实现(后端为nodejs实现)

GIF效果展示

前端实现代码:

    
    
    
    


    

        
原生ajax2.0使用FormData上传文件, 并监听上传进度
        
        上传
        

        

        

            

            

                

                    上传进度0%
                
            
            
        
    
        

• 后端实现代码

const express = require("express");
const multer = require("multer");
const expressStatic = require("express-static");
const fs = require("fs");

let server = express();
let upload = multer({ dest: __dirname+'/uploads/' })
// 处理提交文件的post请求
server.post('/upload_file', upload.single('file'), function (req, res, next) {
  console.log("file信息", req.file);
  fs.rename(req.file.path, req.file.path+"."+req.file.mimetype.split("/").pop(), ()=>{
    res.send({status: 1000})
  })
})

// 处理静态目录
server.use(expressStatic(__dirname+"/www"))
// 监听服务
server.listen(8080, function(){
  console.log("请使用浏览器访问 http://localhost:8080/")
});

Gif图中使用的小姐姐图片素材

• 点我获取上图超清版

小结:

本文代码及相关素材已经托管到Github仓库, 永久下载地址https://github.com/zhaoolee/Blog/tree/master/form_data_upload_file