jquery实现Ajax上传（带进度条）

一、效果图

二、核心代码

• 前端
• 创建元素的方法

        //创建元素的方法
        function createPage(files) {
            for (var i = 0; i < files.length; i++) {
                var fileList = $("<div class='filelist_info'></div>");
                var id = $("<span class='fileid'>" + (i + 1) + ".</span>");
                var name = $("<span class='filename'>" + files[i].name + "</span>");
                var meter = $("<meter class='meter' value='0' min='0' max='" + files[i].size + "'>");
                fileList.append(id);
                fileList.append(name);
                fileList.append(meter);
                $(".allfile").append(fileList);
            }
        } 

• 点击上传的方法

            //这里发送请求  上传
            var url = "http://127.0.0.1:8080/upload";
            //把上传的文件转成表单数据
            for (var i = 0; i < fileData.length; i++) {
                var formData = new FormData();
                formData.append('avatar', fileData[i]);
                $.ajax({
                    method: 'post',
                    url: url,
                    data: formData,
                    processData: false,
                    contentType: false,
                    xhr: function () {
                        var xhr = new XMLHttpRequest();
                        xhr.upload.addEventListener("progress", progress(i));
                        return xhr;
                    },
                    success: function (res) {
                        console.log(res);
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            } 

• 进度条的方法

            function progress(index) {
                var count = 0;
                return function (e) {
                    var nowload = e.loaded;
                    var totle = e.total;
                    $('.meter').eq(index).attr("value", nowload);
                    if (nowload / totle == 1) {
                        $('.filelist_info').eq(index).hide();
                        count++;
                    }
                    if (count >= fileData.length) {
                        $('.filelist_info').remove();
                        $('.file').show();
                        getdir();
                    }

                } 

• 获取上传的目录

        //获取上传的目录
        function getdir() {
            $(".dirlist").html("");
            $.ajax({
                method: 'get',
                url: "http://127.0.0.1:8080/downfile",
                success: function (res) {
                    res.map(function (item) {
                        var str = $("<div>" + item + "<a href='http://127.0.0.1:8080/down?name="+item+"'>下载</a></div>");
                        $(".dirlist").append(str);
                    });
                }
            });
        } 

• 后端
• 安装一个multer插件
• cnpm install --save-dev multer

//文件上传
const multer = require("multer");
let storage = multer.diskStorage({
   //修改上传文件的目录
   destination(req, file, cb) {
       cb(null, './upload');
   },
   //修改上传文件的名称的配置
   filename(req, file, cb) {
       cb(null, file.originalname);
   }
});
let upload = multer({ storage: storage });
router.post("/upload", upload.single('avatar'), (req, res) => {
   let result;
   if (req.file) {
       result = {
           status: "OK"
       };
   }
   else {
       result = {
           status: "error"
       };
   }
   res.json(result);
});

//文件下载
const fs = require("fs");
router.get("/downfile", (req, res) => {
   fs.readdir('./upload', (error, files) => {
       if (error) {
           throw error;
       }
       res.json(files);
   });
});