代码改变世界

HTML5可预览多图片ajax上传(使用formData传递数据)

2017-09-27 00:18 龙恩0707 阅读(...) 评论(...) 编辑 收藏

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

查看效果

API使用方式及github上的源码