JS中FormData类实现文件上传
作者:爱玲姐姐 发布时间:2024-04-10 10:50:10
标签: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上传操作汇总》进行学习。
来源:https://blog.csdn.net/jal517486222/article/details/104769041
0
投稿
猜你喜欢
- 注意事项Soft-NMS对于大多数数据集而言,作用比较小,提升效果非常不明显,它起作用的地方是大量密集的同类重叠场景,大量密集的不同类重叠场
- 本文实例讲述了Python编程之序列操作。分享给大家供大家参考,具体如下:#coding=utf8''''&
- 如下:import pandas as pddf = pd.DataFrame({'Country':['China
- import reimport urllib2import cookielibdef renren():
- 本文主要向大家分享了Python编程中通过Django模块实现用户注册以及邮箱验证功能的简单介绍及代码实现,具体如下。用户注册:类似于用户登
- 引言“深入认识Python内建类型”这部分的内容会从源码角度为大家介绍Python中各种常用的内建类
- 本文实例讲述了python socket多线程通讯方法。分享给大家供大家参考,具体如下:#!/usr/bin/evn python"
- 如何提取JSON数据指定内容假设我们要获取'pic_str'里的数据JSON数据{'err_no': 0,
- 过往经验总结注:笔者写本文的目的不是完整细致地描述连接的全过程,而是记录当中遇到的现象、问题,及为什么会产生这个问题的分析。所以部分过程会省
- 这篇文章主要介绍了Python字符串格式化输出代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- PHP PDO 错误与错误处理PDO::ERRMODE_SILENT此为默认模式。 PDO 将只简单地设置错误码,可使用PDO::error
- import numpy as npa = np.array([[1.1,2.1,3.1,4.1],[5,6,7,8],[9,10,11,1
- 目录1. 字典基础知识字典的基本格式表示字典的键、值设置要求1)键的设置要求2)值的设置要求2. 字典元素增加1.利用赋值给字典增加元素2.
- 总是记不住API。昨晚写的时候用到了这些,但是没记住,于是就索性整理一下吧:python中对文件、文件夹(文件操作函数)的操作需要涉及到os
- 本文实例为大家分享了Bootstrap实现渐变顶部固定自适应导航栏的具体代码,供大家参考,具体内容如下具体代码如下所示:<!DOCTY
- 什么是Flask?Flask是一个用Python编写的Web应用程序框架,Flask是python的web框架,最大的特征是轻便,让开发者自
- 首先:确认自己安装有python(没有安装的同学可自行安装,这里我们不过多赘述)确认安装有python之后,win+r打开cmd窗口,输入p
- 支持向量机可以用来拟合线性回归。 相同的最大间隔(maximum margin)的概念应用到线性回归拟合。代替最大化分割两类目标是,最大化分
- 是的,我们知道:我们可以为border设置它的width,这个border的宽度可以是5px,可是10px,可以是20px,可以是随意数值。
- 最近服务器时不时出现Nginx 502 Bad Gateway,如果在电脑旁边还好,要是半夜或者出去了,怎么办?没关系,写个脚本检测服务状态