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 相关文章推荐
JQuery验证工具类搜集整理
Jan 16 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
php 面向对象的一个例子
2011/04/12 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
php多进程应用场景实例详解
2019/07/22 PHP
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
详解Python编程中time模块的使用
2015/11/20 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
销售会计岗位职责
2014/03/15 职场文书
招标授权委托书样本
2014/09/23 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
导游词之安徽九华山
2019/09/18 职场文书
浅析Python实现DFA算法
2021/06/26 Python
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers