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代码：

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')); // kongzhi1console.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")); // trueconsole.log(formData.has("name2")); // trueconsole.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：

             
                           
     
        
              
              
              
      
       上传图片
      
      
     
          

2-2 使用jquery ajax方式来上传formData数据如下：

HTML代码如下：

     
  
      选择文件             
     

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多张图片上传前预览效果如下：