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 相关文章推荐
轻量级 JS ToolTip提示效果
Jul 20 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
Yii2如何批量添加数据
2016/05/17 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
js 判断 enter 事件
2009/02/12 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
js实现导航跟随效果
2018/11/17 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python 动态调用函数实例解析
2019/10/21 Python
python的faker库用法
2019/11/28 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python右对齐的实例方法
2020/07/05 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
经典广告词大全
2014/03/14 职场文书
合作协议书
2014/04/23 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android