XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件. 
 
所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
这里只展示一个通过from表单来初始化FormData的方式
<form enctype="multipart/form-data" method="post" name="fileinfo">
var oData = new FormData(document.forms.namedItem("fileinfo" ));  

oData.append( "CustomField", "This is some extra data" );  

var oReq = new XMLHttpRequest();  

oReq.open( "POST", "stash.php" , true );  

oReq.onload = function(oEvent) {  

if (oReq.status == 200) {  

          oOutput.innerHTML = "Uploaded!" ;  

     } else {  

          oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";  

     }  

};  

oReq.send(oData);  
这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本:
<form id= "uploadForm">  

<p >指定文件名: <input type="text" name="filename" value= ""/></p >  

<p >上传文件: <input type="file" name="file"/></ p>  

<input type="button" value="上传" onclick="doUpload()" />  

</form>  
function doUpload() {  

var formData = new FormData($( "#uploadForm" )[0]);  

     $.ajax({  

          url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  

          type: 'POST',  

          data: formData,  

          async: false,  

          cache: false,  

          contentType: false,  

          processData: false,  

          success: function (returndata) {  

              alert(returndata);  

          },  

          error: function (returndata) {  

              alert(returndata);  

          }  

     });  

}  

关于FormData及其用法的更多相关文章

  1. formData一般用法,移动端,pc端都可以用,pc有兼容性问题

    其实FormData是一个 对象他是一个比较新的东东(其实我也不知道改叫什么好) 利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个& ...

  2. 通过Ajax方式上传文件,使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  3. [转] 通过Ajax方式上传文件,使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  4. 仿造vue-resource的formdata传对象

    众插件不支持同步,也是没办法的事情,具体为啥就不分析了,确实搞不懂. 一直用vue-resource的post,觉得很舒服. 然,没办法只能仿造一个,自己提供一个同步方法 几个点先摆清楚 1. .th ...

  5. 上传文件,使用FormData进行Ajax请求,jsoncallback跨域

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  6. 《MarkMark学习笔记学习笔记》html学习笔记

    iframe里有一个srcdoc属性,很有用! window.location.href=document.referrer//可以实现返回上一级页面并刷新 HTML5权威指南©®,比较老的书了,有些 ...

  7. Python菜鸟之路:Django 文件上传的几种方式

    方式一:通过form表单中,html input 标签的“file”完成 # 前端代码uoload.html <form method="post" action=" ...

  8. ajax以及文件上传的几种方式

    方式一:通过form表单中,html input 标签的“file”完成 # 前端代码uoload.html <form method="post" action=" ...

  9. C# 大文件上传

    IHttpModule 分块上传大文件 IHttpModule 分块上传大文件 来源:http://www.cnblogs.com/HeroBeast/archive/2008/03/18/10848 ...

随机推荐

  1. .net常见框架

    从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累了一些开源的组件,就目前想到的先整理于此,如果再想到,就继 ...

  2. 20170719xlVBASmartIndent

    Public Sub SmartIndenterProcedure() Dim OneComp As VBComponent Dim StartLine As Long, EndLine As Lon ...

  3. Java基础-集合(12)

    存储数据的容器有数组和StringBuilder.StringBuilder的结果是一个字符串,不满足要求,所以只能选择数组,这就是对象数组.而对象数组又不能适应变化的需求,因为数组的长度是固定的,这 ...

  4. ccf消除类游戏

    问题描述 消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行m列的游戏棋盘上进行,棋盘的每一行每一列的方格上放着一个有颜色的棋子,当一行或一列上有连续三个或更多的相同颜色的棋子时,这些棋子都被消 ...

  5. UVA-10273 Cyborg Genes (DP)

    题目大意:给两个字符串a.b,找出一个最短的字符串c,使得这两个字符串都是c的子序列.只需找出p的最小长度和最小长度时的个数. 题目分析:与LCS问题类似.最小长度的状态转移方程,dp(i,j)=mi ...

  6. UVA-10539 Almost Prime Numbers

    题目大意:这道题中给了一种数的定义,让求在某个区间内的这种数的个数.这种数的定义是:有且只有一个素因子的合数. 题目分析:这种数的实质是素数的至少两次幂.由此打表——打出最大区间里的所有这种数构成的表 ...

  7. page上BeanId与ActionType中的ParameterId

    今天遇到一件有意思的异常. 一个基于EO的VO在页面加载进来之后就CreateRow了一行数据,主键HeaderId也相应的插入了值,但是在保存的时候,老是报HeaderId不能为空的异常. 经查,页 ...

  8. Activiti的后台数据库表详解

    Activiti的后台是有数据库的支持,所有的表都以ACT_开头. 第二部分是表示表的用途的两个字母标识.用途也和服务的API对应. 1)       ACT_RE_*: 'RE'表示reposito ...

  9. Mac下的nodeJs版本切换和升级

    在我们开发多个项目的时候,因为框架支持的node版本不同,所以要切换多个node版本 首先我们要使用npm安装一个模块 n 的全局 1.npm  install  -g  n 2.使用 n 加版本号就 ...

  10. JavaScript学习总结(二)——逻辑Not运算符详解

    在JavaScript 中,逻辑NOT运算符与C和Java中的逻辑 NOT 运算符相同,都由感叹号(!)表示.与逻辑 OR 和逻辑 AND 运算符不同的是,逻辑 NOT 运算符返回的一定是 Boole ...