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, 因为是由