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. Capacitor电容

    capacitor无正负极性. cap electrolit有极性,实际中不能接反,否则电容会烧毁或爆炸. MULTISIM仿真中接反会有漏阻存在,但不会烧毁. 电容的分类 按结构可分为:固定电容,可 ...

  2. 用xml画水平虚线和竖直虚线.md

    1.画水平虚线 直接建一个shape,设置stroke属性就行了,再将这个属性直接作为background的drawable属性引入就行了 注意在4.0以上的真机加一句 <?xml versio ...

  3. HTML基础1

    网页的基本结构(双标签):html,title 页面标题,head 网页上控制信息,body 页面内容,所有属性都写在前面. body的属性:bgcolor 背景色:text 文字颜色:margin ...

  4. String 操作

    String nbbms ="col_1_1_1_1,col_2_2_2_@,"; @ 实现将最后一个逗号去掉:从第一个字符串到最后一个逗号之前的字符串截取[java] Strin ...

  5. jmeter后置处理器 JSON Extractor取多个变量值

    1.需要获取响应数据的请求右键添加-后置处理器-JSON Extractor 2.如果要获取json响应数据多个值时,设置的Variable names (后续引用变量值的变量名设置)与JSON Pa ...

  6. awk知识点全回顾

    本文目录:1.awk简介和基本语法格式2.print和printf格式化输出3.输入行的字段分隔符和行分隔符4.BGEIN和END5.数组6.流程控制语句 6.1 条件判断语句 6.2 while循环 ...

  7. C和C++中的名字空间和作用域

    C和C++中的名字空间和作用域 C语言中有名字空间这个概念吗? 提到名字空间(或者可能更普遍的叫法,命名空间),很可能先想到的是C++,甚至是C#.C中没有名字空间吧?一开始我也是这样认为的,直到我看 ...

  8. 裸机LCD驱动配置

    横屏4.3寸LCD为480*272(行:480个像素点        列:272个行) 1.1  LCD原理图 : Pin1:Von  电源正(这里由硬件自动控制) Pin2:VM/VDEN 数据使能 ...

  9. ini文件必须要全路径名啊

    弄半天必须要全路径名啊.实在不行用./set.ini也可以 用UNICODE保存ini文件

  10. JS学习四（BOM DOM）

    BOM                Screen对象 console.log(window.width);//屏幕宽度 console.log(window.height);//屏幕高度 conso ...