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上传操作汇总》进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS中使用FormData上传文件、图片的方法
关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F
-
JS FormData上传文件的设置方法
使用FormData上传文件时,总是获取不到req.file对象.发现是没有配置对FormData导致. 这里我是在vue中使用axios发送的请求,配置代码如下.重点地方给出注释 <form id="uploadform" method="POST" enctype="multipart/form-data" :action="postImgApi" ref="uploadform"> <
-
vuejs使用FormData实现ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图 前端实现 <template> <div class="admin"> <d
-
thinkphp5 + ajax 使用formdata提交数据（包括文件上传） 后台返回json完整实例
本文实例讲述了thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json.分享给大家供大家参考,具体如下: 知识点总结 1.json格式标准 { 'key':"value" } {"state":"1","msg":"\u7b80\u5386\u6295\u9012\u6210\u529f\uff01"} 前端jquery ajax提交formdata $.ajax({
-
js使用formData实现批量上传
最近项目需要批量上传附件,查了下资料,网上很多但看着一脸懵,只贴部分代码,介绍也不详细,这里记录一下自己的采坑与多种实现,以免以后忘记. 这里先介绍下FormData对象,以下内容摘自地址 XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的
-
JS中FormData类实现文件上传
本文实例为大家分享了JS中FormData类实现文件上传的具体代码,供大家参考,具体内容如下 上篇文章讲到了FormReader类实现文件上传,但是那是HTML5的新特性,在不支持H5的浏览器上则无法使用.这次介绍一个JS的普通类FormData,在不支持H5浏览器环境下也可以文件上传和预览,并且还能监控上传进度. 案例一:xhr.upload.onprogress监控文件的上传进度,并且动态显示 <!DOCTYPE html> <html lang="en">
-
JS中FileReader类实现文件上传及时预览功能
FileReader是H5浏览器才支持的JS类,如果不支持H5de浏览器可以使用FormData类实现文件的上传预览,使用可以参考我的下一篇博客:JS中FormData类实现文件上传 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
-
JS实现表单多文件上传样式美化支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传 文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f
-
Java中使用COS实现文件上传功能
cos是O'Rrilly公司开发的一款用于HTTP上传文件的OpenSource组件 需要cos.jar,下载地址:http://www.servlets.com/cos/ cos上传文件很简单,比fileupload还简单:但是上传最大我试了试,是800多兆,超过直接崩溃: java.io.IOException: Posted content length of 1627105576 exceeds limit of 889192448 --->byte,800多M 只需一个servelt即
-
Java Web使用Html5 FormData实现多文件上传功能
前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法来实现多文件上传),又加上是在移动端做的,所以就打算采用html5的FormData实现多文件上传 首先html页面定义有两种: Html1 <form enctype="multipart/form-data" id="formfile"> <inp
-
node.js使用express框架进行文件上传详解
关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究. 目前的研究算是取得的比较好的进展. Settings-Sync中通过快捷键上传文件,其实主要还是请求后端接口. 于是我便使用node.js模拟一个服务,这个服务其实就相当于github api(Settings-Sync实际请求的接口,比如token验证,gist存储创建等都是来自github 对应的api). 话不多说,直接代码贴起讲解: 1.创建一个node.js项目(这里我以ex
-
vue中实现图片和文件上传的示例代码
html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');
-
node.js使用express-fileupload中间件实现文件上传
目录 初始化项目 编写服务器 初始化客户端 编写组件 FileUpload Message.js Progress.js 测试 本文使用express作为服务端,使用express-fileupload库提供的中间件函数来接受从客户端传来的图片,并将图片作为文件存储在服务端.客户端使用create-react-app框架,bootstrap UI,axios发送http请求和提供进度条当前进度的值,上传成功后,根据图片在服务端上的位置,并显示图片. 初始化项目 mkdir react-file-
-
Quarkus中实现Resteasy的文件上传下载操作
目录 前言 文件上传 文件下载 前言 做java web开发,文件的上传和下载是一个非常常见的需求场景.在spring生态下的文件上传下载非常简单,记得五年前,我刚写博的时候也写过spring的上传和下载<SpringMvc实现文件上传与下载>,以及Struts2的文件上传和下载<java Struts2实现文件上传下载>.今天来看看Quarkus框架中是如何实现的,因为Quarkus的JAX-RS采用Resteasy的实现,故Quarkus中的文件上传和下载,也就是Resteas
-
Vue项目中使用WebUploader实现文件上传的方法
简介: WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 .在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ .两套运行时,同样的调用方式,可供用户任意选用.采用 大文件分片并发上传 ,极大的提高了文件上传效率. 分片.并发 分片 与 并发 结合,将一个大文件分割成多块, 并发上传 ,极大地提高