原生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/")});Gif图中使用的小姐姐图片素材
- 点我获取上图超清版
小结:
本文代码及相关素材已经托管到Github仓库, 永久下载地址 zhaoolee/Blog/tree/master/form_data_upload_file
上一篇 目录 已是最后
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 原生js使用FormData上传文件并监听进度(附前后台实现源码)
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 原生js使用FormData上传文件并监听进度(附前后台实现源码)
