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上的源码

HTML5可预览多图片ajax上传(使用formData传递数据)的更多相关文章

  1. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  2. 基于HTML5和JSP实现的图片Ajax上传和预览

    本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...

  3. h5 js 图片预览并判断 ajax上传

    //建立一個可存取到該file的url function getObjectURL(file) { var url = null; if (window.createObjectURL != unde ...

  4. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  5. thinkphp3.2.2有预览的多图上传

    thinkphp3.2.2有预览的多图上传 整体思路 1 封装文件上传和图片上传的类文件 2 视图中添加相关JS和表单提交 3 控制器中添加上传文件的相关代码 一 2个class 文件 请上传到/Th ...

  6. Burp Post、Get数据包转为上传multipart/form-data格式数据包

    方法一: 新建一个网页进行上传,代码代码如下: <html> <head></head> <body> <form method="po ...

  7. h5可预览 图片ajax上传 ，后台有点弱不知道数据怎么取，但是可以肯定数据上传成功了

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  9. python requests-toolbelt 生成上传multipart/form-data格式数据

    需求背景 想使用requests做一个自动上传的功能,发现这里问题挺多的,就记录一下. 如上图上传功能,一般分为input标签,非input标签.我这里也不管什么标签,直接抓包看数据流. Conten ...

随机推荐

  1. 四种JavaScript隐式类型转换的总结

    一般存在四种情况,JavaScript会对变量的数据类型进行转换. 目录 * if中的条件会被自动转为Boolean类型 * 会被转为false的数据 * 会被转为true的数据 * 参与+运算都会被 ...

  2. Gson-记录一个空格引发的json血案

    使用的Gson将json自动装载到Bean,一般情况下,用起来又快又稳. 直到有一天,测试告诉我说,填写地址时,地址里有空格,就会500异常. 我把异常截取出来: Type Exception Rep ...

  3. 部分iphone手机上的div的点击事件无效

    最近在做一个手机移动端的项目,Andrio手机和部分iphone手机上点击事件都是好的,只有在老的型号上的iphone手机上点击事件无效果. 后来在网上查了很多资料,发现有加样式cursor:poin ...

  4. 2017年9月3日 Spring及Mybatis中连接数据库的不同方式

    连接数据库用spring和mybatis中使用的方法可以不同,mybaits可以不用写数据库的配置文件 Spring的连接方法 <!-- 读取属性文件(.properties)的内容 --> ...

  5. Python验证码通过pytesser识别

    Python安装包: 需要安装的包主要有两个: PIL 和 pytesser .tesseract (1).安装PIL:下载地址:http://www.pythonware.com/products/ ...

  6. 【搬运工】之——Selenium+IDEA+Maven+TestNG环境搭建（转）

    Selenium+IDEA+Maven+TestNG环境搭建 第一 安装java环境. 1. 下载并安装Jdk1.7或Jdk1.8 http://www.oracle.com/technetwork/ ...

  7. Winform DataGridView修改数据源界面不刷新问题

    错误描述 对于dataGridView,设置数据源为一个List集合时,修改了List集合以后即使重新设置数据源界面也不会刷新. 注:如果先设置DataSource=null;可以重新加载,但是界面设 ...

  8. 通过createObjectURL实现图片预览

    实现原理:通过createObjectURL 创建一个临时指向某地址的二进制对象. 过程:点击触发隐藏的 input   file  的点击事件,使用createObjectURL读取 file,创建 ...

  9. jQuery常用工具方法

    前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...

  10. 我的hibernate学习记录（二）

    通过上一篇文章我的hibernate学习记录(一)基本上的入门了hibernate,但是,里面还有还多东西是通过迷迷糊糊的记忆,或者说copy直接弄进去的,所以这篇文章就需要对上篇的一些文件.对象进行 ...