脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js文件上传

JS中FormData类实现文件上传

 更新时间：2020年03月27日 17:11:29   作者：爱玲姐姐  
这篇文章主要为大家详细介绍了JS中FormData类实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

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

<!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>

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

成功预览我家耶啵的帅照

<!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上传操作汇总》进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JSP跨iframe如何传递参数实现代码

    JSP跨iframe如何传递参数实现代码

    表单与操作页面分离，按钮按下，click 或者onclick事件触发，传递一个唯一性的参数至子页面JSP，感兴趣的朋友可以了解下
    2013-09-09
  • JSQL  一个 web DB 的封装

    JSQL  一个 web DB 的封装

    当然随着HTML5的普及，web DB 已经是大势所趋了
    2010-05-05
  • javascript实现实时输出当前的时间

    javascript实现实时输出当前的时间

    在网页中实时的显示时间，不但可以给网页添色，还可以方便浏览者掌握当前时间，为了提高网站的开发速度，可以把主代码封装在一个单独的函数里面，在需要的时候直接调用而我为了演示，直接写在了主页面，方便大家观看
    2015-04-04
  • javascript实现根据身份证号读取相关信息

    javascript实现根据身份证号读取相关信息

    这篇文章主要介绍了javascript实现根据身份证号读取相关信息,需要的朋友可以参考下
    2014-12-12
  • JS中完美兼容各大浏览器的scrolltop方法

    JS中完美兼容各大浏览器的scrolltop方法

    最近用到scrolloTop()想去获取滚动条距离顶部的距离，结果只有chrome下面可以正常的获取scrollTop，ff和ie下这个值都等于0，使得许多效果比如屏幕滚动等等均无法正常实现。究其原因是scrollTop()在各个浏览器中的兼容性问题，今天我们就来详细探讨下。
    2015-04-04
  • 教你用Js写一个简单的五子棋小游戏

    教你用Js写一个简单的五子棋小游戏

    听说这是一道腾讯的面试题,可能网上已经有不少答案了,晚上没事看到这道题就自己做了下,下面这篇文章主要给大家介绍了关于如何用Js写一个简单的五子棋小游戏的相关资料,需要的朋友可以参考下
    2022-07-07
  • Openlayers学习之加载鹰眼控件

    Openlayers学习之加载鹰眼控件

    这篇文章主要介绍了Openlayers学习之加载鹰眼控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JS插件plupload.js实现多图上传并显示进度条

    JS插件plupload.js实现多图上传并显示进度条

    这篇文章主要为大家详细介绍了PHP结合plupload.js JS插件实现多图上传并显示进度条加删除实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript 判断浏览器是否支持SVG的代码

    JavaScript 判断浏览器是否支持SVG的代码

    SVG(可缩放矢量图形)，接下来将介绍下如何判断浏览器是否支持SVG,感兴趣的朋友可以参考下哈，希望本代码对你有所帮助
    2013-03-03
  • js中判断Object、Array、Function等引用类型对象是否相等

    js中判断Object、Array、Function等引用类型对象是否相等

    项目中有时会需要对引用类型进行比较，如常见的object和array，我们知道，引用类型无法直接使用 == 或=== 取得期待结果，因此需要一个迭代的compare函数转化成原始类型进行比较
    2012-08-08

最新评论