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. TF-IDF模型详解

    1. 理论基础 由于数据挖掘所有数据都要以数字形式存在,而文本是以字符串形式存在.所以进行文本挖掘时需要先对字符串进行数字化,从而能够进行计算.TF-IDF就是这样一种技术,能够将字符串转换为数字,从 ...

  2. JavaSE二次学习之标识符和编程命名相关的内容

    前段时间阿里开源了<阿里巴巴 JAVA 开发手册>,里面详细叙述了有关编程命名.sql规约.工程规约等内容,作为一个初学者,只讨论一下-编程规约-的部分. 这几天又重新回去看了看JavaS ...

  3. java性能真的差吗

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt275 我见过java运行在手机上,包括很廉价的山寨手机,但是却暂时没发现.n ...

  4. oracle得到日期对应的星期

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp56   select to_char(sysdate,'ww') fro ...

  5. WPF--鼠标右键菜单中的Command命令实现

    一个功能,在ListView中的ListBoxItem控件上实现右键菜单关闭选项,将该ListBoxItem从ListView中删除. 利用 RoutedCommand类创建Command命令,MSD ...

  6. 转:深入Java集合学习系列：HashMap的实现原理

    1. HashMap概述: HashMap是基于哈希表的Map接口的非同步实现(Hashtable跟HashMap很像,唯一的区别是Hashtalbe中的方法是线程安全的,也就是同步的).此实现提供所 ...

  7. 通过修改my.ini配置文件来解决MySQL 5.6 内存占用过高的问题

    打开后台进程发现mysql占用的内存达到400+M. 修改一下my.ini这个配置文件的配置选项是可以限制MySQL5.6内存占用过高这一问题的,具体修改选项如下: performance_schem ...

  8. 201521123100 《Java程序设计》 第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代 ...

  9. 201521123111《Java程序设计》第2周学习总结

    1. 本章学习总结 这个星期感觉有点醉,整个人都有点迷茫,仿佛突然失去了方向,连java也难以平复所带来的焦躁的情绪.再加上认为周四早上是没有课的,所以忘记去上了.最近总感觉像咸鱼一样,无所事事,想打 ...

  10. 201521123122《Java程序设计》第1周学习总结

    1. 本周学习总结 因为寒假里也没有好好预习java,第一周上课还是有点懵逼. ①.了解了JVM,JRE,JDK的区别,能够熟练安装JDK. ②.编了我人生中的第一个java程序"hello ...