HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据)
在介绍上传图片之前，我们简单的来了解下FormData的基本使用；介绍完成后这些基本知识后，我们会在文章最后提供一个demo，就是ajax多图片上传前预览效果。
1. formData的基本的用法：
首先创建一个 空对象实例 代码如下：
var formData = new FormData();
1-1 获取值
通过get(key)/getAll(key)来获取对应的value；比如：
formData.get("name"); // 获取key为name的第一个值。
formData.getAll("name"); // 返回一个数组，获取key为name的所有值。
比如如下HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<form id="myForm">
<input type="text" name="name" placeholder="请输入你的名字" />
<input type="password" name="password" placeholder="请输入你的密码" /> <input type="text" name="n1" />
<input type="text" name="n1" /> <input type="submit" id="submitId" value="提交" />
</form>
<script>
// 表单初始化
var form = document.getElementById('myForm');
var submitId = document.getElementById("submitId");
submitId.addEventListener('click', function(e){
e.preventDefault();
var formData = new FormData(form);
// 获取名字
var name = formData.get("name");
var psw = formData.get("password");
console.log(name);
console.log(psw); // 使用getAll 获取name为n1的所有值
var arrs = formData.getAll("n1");
console.log(arrs); // 返回一个数组 }, false); </script>
</body>
</html>
1-2 添加数据
可以通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾。
var formData = new FormData();
formData.append('name', 'kongzhi1');
formData.append('name', 'kongzhi2');
formData.append('name', 'kongzhi3'); console.log(formData.get('name')); // kongzhi1
console.log(formData.getAll('name')); // ["kongzhi1", "kongzhi2", "kongzhi3"]
1-3 设置修改数据
可以通过 set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的值。
var formData = new FormData();
formData.append("name", 'kongzhi1');
console.log(formData.getAll("name")); // ["kongzhi1"] formData.set("name", 'kongzhi2');
console.log(formData.getAll("name")); // ["kongzhi2"]
1-4 判断是否存在该数据
我们可以通过has(key) 来判断是否有对应的key值。
var formData = new FormData();
formData.append("name", 'kongzhi1');
formData.append("name2", null); console.log(formData.has("name")); // true
console.log(formData.has("name2")); // true
console.log(formData.has("name3")); // false
1-5 删除数据
通过delete(key), 来删除数据。
var formData = new FormData();
formData.append("name", "kongzhi1");
formData.append("name", "kongzhi2"); console.log(formData.getAll("name")); // ["kongzhi1", "kongzhi2"] formData.delete("name");
console.log(formData.getAll("name")); // []
二：使用XMLHttpRequest formData上传文件
XMLHttpRequest2 定义了FormData类型，FormData为序列化表单以及创建与表单格式相同的数据(用于通过xhr数据传输)提供了便利。
浏览器支持：IE9及IE9-不支持。
原审XMLHttpRequest提交formData数据如下demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<form name='form1' id='form1'>
<input type='file' name='imgFile' />
<input type='text' name='name1' />
<input type='text' name='name2' /> <div id="uploadImg">上传图片</div>
</form>
<script>
var form1 = document.getElementById("form1");
var uploadImg = document.getElementById("uploadImg");
var xml = new XMLHttpRequest(); uploadImg.addEventListener('click', function(e){
e.preventDefault();
var formData = new FormData(form1);
xml.open("POST", url, true);
xml.send(forData);
});
</script>
</body>
</html>
2-2 使用jquery ajax方式来上传formData数据如下：
HTML代码如下：
<div id="container">
<a href="javascript:void(0)" class="file">选择文件
<input type='file' id="file" multiple accept = 'image/gif,image/jpeg,image/jpg,image/png' />
<input type="hidden" />
</a>
</div>
javascript 代码如下：
var formdata = new FormData();
// 上传到服务器的字段名称
formdata.append("imgFile", $('#file')[0].files[0]);
$.ajax({
url: self.url,
type: 'POST',
cache: false,
data: formdata,
timeout: 5000,
//必须false才会避开jQuery对 formdata 的默认处理
// XMLHttpRequest会对 formdata 进行正确的处理
processData: false,
//必须false才会自动加上正确的Content-Type
contentType: false,
xhrFields: {
withCredentials: true
},
success: function(data) { },
error: function(XMLHttpRequest, textStatus, errorThrown) { }
如上参数设置含义如下：
1. processData: false, 因为data值是formdata对象，不需要对数据做处理。
2. cache: false, 上传文件不需要缓存。
3. contentType: false, 因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
4. xhrFields: { withCredentials: true }, 跨域请求设置
下面是一个 使用 ajax中的formData 多张图片上传前预览效果的一个demo。
formData 对ajax多张图片上传前预览效果如下：
HTML5可预览多图片ajax上传(使用formData传递数据)的更多相关文章
- 基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
- 基于HTML5和JSP实现的图片Ajax上传和预览
本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...
- h5 js 图片预览并判断 ajax上传
//建立一個可存取到該file的url function getObjectURL(file) { var url = null; if (window.createObjectURL != unde ...
- ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- thinkphp3.2.2有预览的多图上传
thinkphp3.2.2有预览的多图上传 整体思路 1 封装文件上传和图片上传的类文件 2 视图中添加相关JS和表单提交 3 控制器中添加上传文件的相关代码 一 2个class 文件 请上传到/Th ...
- Burp Post、Get数据包转为上传multipart/form-data格式数据包
方法一: 新建一个网页进行上传,代码代码如下: <html> <head></head> <body> <form method="po ...
- h5可预览 图片ajax上传 ，后台有点弱不知道数据怎么取，但是可以肯定数据上传成功了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- H5图片预览、压缩、上传
目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...
- python requests-toolbelt 生成上传multipart/form-data格式数据
需求背景 想使用requests做一个自动上传的功能,发现这里问题挺多的,就记录一下. 如上图上传功能,一般分为input标签,非input标签.我这里也不管什么标签,直接抓包看数据流. Conten ...
随机推荐
- asp.net mvc 接入美圣短信 验证码发送
第1步:登录美圣短信控制台 http://www.rcscloud.cn/hy/HY_ZH/login 账号:******* 密码:******* http://www.rcscloud.cn/com ...
- The C++ Programming Language 学习笔记 第四章 类型和声明
1.关于main 函数中的 return 0 C99标准中,main 函数的返回值类型必须是 int ,这样返回值才能传递给程序的激活者(如操作系统).如果 main 函数的最后没有写 return ...
- [2017-05-31]Abp介绍和经验分享-目录
很久没动博客了,人比较懒. 最近想写点啥,主要就介绍下ABP框架和我这两年的使用经验. 文档翻译之类的工作就算了,需要的请参考: 官方文档 PS:官方文档末尾有中文文档的链接,这里就不贴了 先列个提纲 ...
- [2015-11-10]分享一个调用msbuild生成解决方案并打包发布的批处理脚本
最近工作成果之一,特此记录. 用于打包的批处理脚本 注意设置 path/to/your/solutionfile.sln 指向vs的解决方案文件. setlocal enabledelayedexpa ...
- 两个input在同一行连着不留缝隙
方法1:让两个input 连在一起写 不换行 <div class="inputDiv"> <input type="text" placeh ...
- 带你走进SAP项目实施过程——立项（1）
到底谁会首先有上ERP的想法,可能是企业老板,也可能是总经理级别等高管.但不管是谁,在确定之前,按道理企业风控部.总经办或者信息部等相关部门都需要对ERP项目做立项申请.毕竟ERP项目涉及企业方方面面 ...
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
- CurrentCulture和CurrentUICulture的区别
CurrentCulture 这个属性用来表示和改变使用者要使用的“地区属性”,地区属性改变后,数字.日期时间等表示格式也随之改变. 注意:一定是“地区属性”,如"zh-cn".& ...
- 为什么可以通过URL来调起APP - URL Scheme和Intent
在手机浏览器中可以通过URL调起APP是不是很神奇?这篇文章就告诉你为什么. URL Scheme 先从前端能接触到的URL Scheme分析一下 丢wiki:https://en.wikipedia ...
- NHibernate教程(11)--多对多关联查询
本节内容 多对多关系引入 多对多映射关系 多对多关联查询 1.原生SQL关联查询 2.HQL关联查询 3.Criteria API关联查询 结语 多对多关系引入 让我们再次回顾在第二篇中建立的数据模型 ...