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. 用xml画水平虚线和竖直虚线.md

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

  2. 利用wireshark任意获取qq好友IP实施精准定位

    没事玩一把,感觉还挺有趣,首先打开wireshark: 不管你连接的什么网,如图我连接的是WLAN,双击进入如图界面: ctrl-f进行搜索:如图 选择分组详情,字符串,并输入020048.这时候你就 ...

  3. 从源码分析java.lang.String.isEmpty()

    今天在写代码的时候用到了java.lang.String.isEmpty()的这个方法,之前也用过,今天突发奇想,就看了看源码,了解了解它的实现方法,总结出来,大家可以交流交流. 通常情况下,我们使用 ...

  4. 理解 angular 的路由功能

    相信很多人使用angular 都是因为他路由功能而用的 深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研 ...

  5. Java 得到磁盘以及内存信息

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt217 1.得到磁盘信息 File[] files = File. listR ...

  6. js函数防抖、节流实现

    防抖 Debounce 函数防抖就是,延迟一段时间再执行函数,如果这段时间内又触发了该函数,则延迟重新计算: // 简单实现 function debounce(fn, wait) { let t r ...

  7. Spring上传文件，图片，以及常见的问题

    1. 在工程依赖库下添加文件上传jar包 commons-fileupload-1.2.2.jar commons-io-2.4.jar 2.在springMVC配置文件中配置视图解析multipar ...

  8. 非对话框程序创建组合框Groupbox

    对话框程序中的控件,例如button.groupbox之类,是直接放上去的.当然,除groupbox以外,在MFC中其他控件都有相对应的类,以支持程序员在非对话框程序中动态创建控件.而唯独好像没有gr ...

  9. 【1414软工助教】团队作业10——复审与事后分析（Beta版本） 得分榜

    题目 团队作业10--复审与事后分析(Beta版本) 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 团队作业1:团队展示 团队作业2:需求分析& ...

  10. 结队编程-基于gui的四则运算生成器

    成员:卢少锐 201421123027.刘存201421033023 coding.net地址 1.需求分析:除了实现四则运算的功能外,还添加了计时器功能和语言选择功能 2.程序设计:这次作业是基于上 ...