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 模式设计之工厂模式详细说明
May 10 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
浅谈javascript中return语句
Jul 15 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
vue mounted组件的使用
Jun 18 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
附件名前加网站名
2008/03/23 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
动态添加js事件实现代码
2009/03/12 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python比较两个列表是否相等的方法
2015/07/28 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
Python自带的IDE在哪里
2020/07/01 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
SQL SERVER面试资料
2013/03/30 面试题
公司股份转让协议书范本
2015/01/28 职场文书
银行稽核岗位职责
2015/04/13 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL