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 相关文章推荐
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
关于vue-router-link选择样式设置
Apr 30 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
数据库的日期格式转换
2006/10/09 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
python getopt 参数处理小示例
2009/06/09 Python
Python中除法使用的注意事项
2014/08/21 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
如何解决安装python3.6.1失败
2020/07/01 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
新闻编辑自荐信
2013/11/03 职场文书
卫生标语大全
2014/06/21 职场文书
应聘教师求职信
2014/07/19 职场文书
生产操作工岗位职责
2014/09/16 职场文书
金陵十三钗观后感
2015/06/04 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript