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. mysql存储过程查询结果循环遍历 判断 赋值 游标等基本操作

    一.首先说下本篇博客所实现功能的背景和功能是怎样的: 背景:因为公司项目开始迁移新平台项目,所以以前的平台老数据以及订单信息需要拆分表,而且需要业务逻辑来分析以前的订单表,来拆分成另外的几个新表,包括 ...

  2. DOM+面向对象面试题

    1.dom常见的节点类型---------------------------解彬1510-B 1.nodeType------节点类型,元素节点是1,文本节点是3. 2.firstChild---- ...

  3. Centos7.2下Nginx配置SSL支持https访问(站点是基于.Net Core2.0开发的WebApi)

    准备工作 1.基于nginx部署好的站点(本文站点是基于.Net Core2.0开发的WebApi,有兴趣的同学可以跳http://www.cnblogs.com/GreedyL/p/7422796. ...

  4. ASP.NET Core MVC I/O编程模型

    1. ASP.NET Core MVC I/O编程模型 1.1. I/O编程模型浅析 1.2. 同步阻塞I/O 1.3. 同步非阻塞I/O 1.4. 异步I/O 1.5. 总结 1.1. I/O编程模 ...

  5. JDK源码阅读——ArrayList

    序 如同C语言中字符数组向String过渡一样,作为面向对象语言,自然而然的出现了由Object[]数据形成的集合.本文从JDK源码出发简单探讨一下ArrayList的几个重要方法. Fields / ...

  6. jquery_mobile事件

    1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

  7. 10 Logistic Regression

    线性分类中的是非题 --->概率题 (设置概率阈值后,大于等于该值的为O,小于改值的为X) --->逻辑回归 O为1,X为0 逻辑回归假设 逻辑函数/S型函数:光滑,单调 自变量趋于负无穷 ...

  8. 深入理解计算机系统（2.3）------布尔代数以及C语言运算符

    本篇博客我们主要讲解计算机中的布尔代数以及C语言的几个运算符. 1.布尔代数 我们知道二进制值是计算机编码.存储和操作信息的核心,随着计算机的发展,围绕数值0和1的研究已经演化出了丰富的数学知识体系. ...

  9. Mac Intellij Debug 模式

    前言:本文的核心是记录debug的使用,与具体的操作系统无关. 1.什么是Debug Debug是程序的一种运行模式.用来发掘程序的走向,以及程序在运行过程中参数的变化. 2.Debug的作用 deb ...

  10. 201521123088《java程序设计》第四次总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.11.2 使用常规方法总结其他上课内容 1.多态:同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果,这就是多态性. ...