专栏首页木子昭的博客原生js使用FormData上传文件并监听进度(附前后端实现源码)

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

  • 在ajax1.0时代, 是无法直接上传文件的, 到了ajax2.0时代, 新增了FormData, 我们就可以用FormData完成文件的上传
  • 以前我们用form表单中的<input type="file"/>实现文件上传, 但前端无法实时查看上传的进度, 而ajax2.0可以让我们实时监控上传进度
  • 下面是一个原生js使用ajax 完成 FormData上传文件, 并实时监听文件上传进度的小Demo, 前后端均已完成代码实现(后端为nodejs实现)

GIF效果展示

前端实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生ajax2.0使用FormData上传文件, 并监听上传进度</title>
</head>
<body>
    <div style="text-align: center; padding-top: 50px">
        <div style="font-size: 16px; color: #44A1F8;padding-bottom: 50px">原生ajax2.0使用FormData上传文件, 并监听上传进度</div>
        <input type="file" id="avatar" />
        <button onclick="to_upload_file()">上传</button>
        <br>
        <br>
        <div style="text-align: left;display: inline-block;width: 300px; height: 20px; border: 1px solid #44A1F8; border-radius: 2px;position: relative">
            <div id="progress_bar" style="display: inline-block; width: 0px; height: 20px;background-color: #64B587"></div>
            <div style="text-align: center;width: 300px;position: absolute; top: 0; font-size:16px; color: #413F43">
                <div id="loading">
                    上传进度0%
                </div>
            </div>
            
        </div>
    </div>
        <script>
            // 处理上传进度
            function progressFunction(e){
                var progress_bar = document.getElementById("progress_bar");
                var loading_dom = document.getElementById("loading");
                var loading = Math.round(e.loaded / e.total * 100);
                console.log("loading::", loading);

                if(loading === 100){
                    loading_dom.innerHTML = "上传成功^_^";
                }else{
                    loading_dom.innerHTML = "上传进度"+loading+"%"
                }
                
                progress_bar.style.width = String(loading * 3) + "px";
            }
            // 上传成功
            function uploadComplete(e) {
                console.log("上传成功!", e);
            }
            // 上传失败
            function uploadFailed(e) {
                console.log("上传失败", e);
            }
    
            function to_upload_file(){
                var file_obj = document.getElementById("avatar").files[0]
                if(file_obj){
                    var url = "/upload_file";
                    var form = new FormData();
                    form.append("file", file_obj);
                    var xhr = new XMLHttpRequest();
                    xhr.onload = uploadComplete; // 添加 上传成功后的回调函数
                    xhr.onerror =  uploadFailed; // 添加 上传失败后的回调函数
                    xhr.upload.onprogress = progressFunction; // 添加 监听函数
                    xhr.open("POST", url, true);
                    xhr.send(form);
                }else{
                    alert("请先选择文件后再上传")
                }
            }
        </script>
</body>
</html>
  • 后端实现代码
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/")
});

小结:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 挖掘dwr

    精巧的设计使DWR很容易被java开发人员接受;对传统web程序的无侵害性让它被引入更多的项目。与服务器端通信,DWR很有代表性,并很好的隐藏的xm...

    源哥
  • 八爪鱼采集器︱加载更多、再显示20条图文教程(Xpatth、Ajax)

    由于代码布置采集器比较麻烦,又很早知道八爪鱼采集器的强大,所以把一些常规的采集内容贴成图文教程,供以后使用。

    素质
  • anwsion问答系统研究笔记

    /app/文件夹下是action 所有action类都继承/system/中的基类AWS_CONTROLLER /models/文件夹下是mode...

    lilugirl
  • DWR让Ajax如此简单(2)

    源哥
  • Getting Started with DWR

    There are 2 ways to get started with DWR, the easy way is to download the WAR fi...

    源哥
  • DWR让Ajax如此简单(1)

    阅读提示:这篇文章让读者看到了一个使用了DWR的Web应用是如何一步步建立的。我会展示创建这个简单的示例应用的必要的细节,这个应用是可下载的并且可以在你的环境...

    源哥
  • DWR文档之 技巧和要点

    这里列出了在使用DWR时候的一些技巧和要点,希望对你有所帮助。请对你有过帮助的地方添加评论…

    源哥
  • Scripting Introduction

    相对而言Java同步调用,创建与Java代码匹配的Ajax远程调用接口的最大挑战来至与实现Ajax的异步调用特性。

    源哥
  • yii2学习笔记,错误总结,持续更新

    Either ‘name’, or ‘model’ and ‘attribute’ properties must be specified

    ke1th
  • 微信开发笔记

    要实现网页版微信扫码登录必须: 1 有开发平台账号 2 网站服务已经被绑定到开发平台账号

    lilugirl

扫码关注云+社区

领取腾讯云代金券