JS中FormData类实现文件上传


Posted in Javascript onMarch 27, 2020

本文实例为大家分享了JS中FormData类实现文件上传的具体代码,供大家参考,具体内容如下

上篇文章讲到了FormReader类实现文件上传,但是那是HTML5的新特性,在不支持H5的浏览器上则无法使用。这次介绍一个JS的普通类FormData,在不支持H5浏览器环境下也可以文件上传和预览,并且还能监控上传进度。

案例一:xhr.upload.onprogress监控文件的上传进度,并且动态显示

JS中FormData类实现文件上传

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .progress {
 width: 100px;
 height: 10px;
 background-color: #eee;
 }
 .progress-bar {
 width: 0;
 height: 10px;
 background-color: blue;
 }
 </style>
</head>
<body>
 <form action="" id="form">
 <input type="file" name="file" id="file">
 </form>
 <div class="progress">
 <div class="progress-bar" id="bar"></div>
 </div>
 <script>
 var file = document.getElementById("file");
 var bar = document.getElementById("bar");
 file.onchange = function () {
 var formData = new FormData();
 // 上传的文件
 formData.append('attrName', this.files[0]);

 var xhr = new XMLHttpRequest();
 xhr.open("post", "/upload");
 // xhr.upload.onprogress监听上传进度
 xhr.upload.onprogress = function (ev) {
 // ev.loaded表示上传了多少,ev.total表示文件的总大小
 var result = (ev.loaded / ev.total * 100).toFixed(2) + '%';
 // result为进度百分比
 bar.style.width = result;
 bar.innerHTML = result;
 }
 xhr.send(formData);
 xhr.onload = function () {
 if(xhr.status == 200) {
  console.log(xhr.responseText);
 }
 }
 }
 </script>
</body>
</html>

案例二:服务器端返回上传路径,供客户端预览上传的图片效果

成功预览我家耶啵的帅照

JS中FormData类实现文件上传

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .progress {
 display: inline-block;
 width: 600px;
 height: 20px;
 border-radius: 5px;
 background-color: #eee;
 }
 .progress-bar {
 width: 0;
 height: 20px;
 background-color: orange;
 border-radius: 5px;
 font-size: 16px;
 text-align: center;
 color: #fff;
 }
 </style>
</head>
<body>
 <form action="" id="form">
 <input type="file" name="file" id="file">
 <div class="progress">
 <div class="progress-bar" id="bar"></div>
 </div>
 </form>
 
 <div id="box"></div>
 <script>
 var file = document.getElementById("file");
 var bar = document.getElementById("bar");
 var box = document.getElementById("box");
 file.onchange = function () {
 var formData = new FormData();
 // 上传的文件
 formData.append('attrName', this.files[0]);

 var xhr = new XMLHttpRequest();
 xhr.open("post", "/upload");
 xhr.upload.onprogress = function (ev) {
 // ev.loaded表示上传了多少,ev.total表示文件的总大小
 var result = (ev.loaded / ev.total * 100).toFixed(2) + '%';
 // result为进度百分比
 bar.style.width = result;
 bar.innerHTML = result;
 }
 xhr.send(formData);
 xhr.onload = function () {
 if(xhr.status == 200) {
  var result = JSON.parse(xhr.responseText);
  var img = document.createElement('img');
  img.src = result.path;
  // 图片加载完成在进行显示,否则用户会看到图片的加载过程,效果不好
  img.onload = function () {
  box.appendChild(img);
  }
 }
 }
 }
 </script>
</body>
</html>

nodejs服务器端的部分代码:

app.post('/upload', (req, res) => {
 // 创建formidable表单解析对象
 const form = new formidable.IncomingForm();
 // 上传文件的路径
 form.uploadDir = path.join(__dirname, 'public', 'uploads');
 // 上传文件的后缀名保留
 form.keepExtensions = true;
 // 解析客户端传递过来的FormData对象
 form.parse(req, (err, fileds, files) => {
 // 将文件的地址扒出来以json对象的形式返回给客户端
 res.send({
 path: files.attrName.path.split('public')[1]
 });
 })
})

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
Javascript实现购物车功能的详细代码
May 08 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
vue-model实现简易计算器
Aug 17 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 #Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 #jQuery
开发Node CLI构建微信小程序脚手架的示例
Mar 27 #Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 #Javascript
vue跳转页面的几种方法(推荐)
Mar 26 #Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 #Javascript
JavaScript定时器使用方法详解
Mar 26 #Javascript
You might like
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
php学习 函数 课件
2008/06/15 PHP
WAF的正确bypass
2017/01/05 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
php实现图片压缩处理
2020/09/09 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
Python实现嵌套列表去重方法示例
2017/12/28 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
python标识符命名规范原理解析
2020/01/10 Python
市场营销工作计划书
2014/09/15 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2014年度培训工作总结
2014/11/27 职场文书
校本研修个人总结
2015/02/28 职场文书
婚庆司仪开场白
2015/05/29 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
详解MySQL连接挂死的原因
2021/05/18 MySQL