使用FormData对象
利用FormData
对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest
发送这个"表单".
创建一个FormData对象
你可以先创建一个空的FormData
对象,然后使用append()
方法向该对象里添加字段,如下:
var oMyForm = new FormData();oMyForm.append("username", "Groucho"); oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"// fileInputElement中已经包含了用户所选择的文件 oMyForm.append("userfile", fileInputElement.files[0]);var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容 var oBlob = new Blob([oFileBody], { type: "text/xml"});oMyForm.append("webmasterfile", oBlob);var oReq = new XMLHttpRequest(); oReq.open("POST", "http://foo.com/submitform.php"); oReq.send(oMyForm);
FormData.append()
方法赋给字段"accountnum"的数字被自动转换为字符(字段的值可以是一个Blob
对象,一个File
对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).
在该例子中,我们创建了一个名为oMyForm的FormData
对象,该对象中包含了名为"username", "accountnum", "userfile" 以及 "webmasterfile"的字段名,然后使用XMLHttpRequest
的send()
方法把这些数据发送了出去."webmasterfile"字段的值不是一个字符串,还是一个Blob
对象.
使用HTML表单来初始化一个FormData对象
可以用一个已有的<form>
元素来初始化FormData对象
,只需要把这个form
元素作为参数传入FormData
构造函数即可:
var newFormData = new FormData(someFormElement);
例如:
var formElement = document.getElementById("myFormElement"); var oReq = new XMLHttpRequest(); oReq.open("POST", "submitform.php"); oReq.send(new FormData(formElement));
你可以通过这种方式添加一些不想让用户编辑的固定字段,然后再发送.
使用FormData对象发送文件
你还可以使用FormData
来发送二进制文件.首先在HTML中要有一个包含了文件输入框的form元素:
<form enctype="multipart/form-data" method="post" name="fileinfo"><label>Your email address:</label><input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /><label>Custom file label:</label><input type="text" name="filelabel" size="12" maxlength="32" /><br /><label>File to stash:</label><input type="file" name="file" required /> </form> <div id="output"></div> <a href="javascript:sendForm()">Stash the file!</a>
然后你就可以使用下面的代码来异步的上传用户所选择的文件:
function sendForm() {var oOutput = document.getElementById("output");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); }
你还可以不借助HTML表单,直接向FormData
对象中添加一个File
对象或者一个Blob
对象:
data.append("myfile", myBlob);
如果FormData对象中的某个字段值是一个Blob
对象,则在发送http请求时,代表该Blob
对象所包含文件的文件名的"Content-Disposition"请求头的值在不同的浏览器下有所不同,Firefox使用了固定的字符串"blob,"而Chrome使用了一个随机字符串.
你还可以使用jQuery来发送FormData,但必须要正确的设置相关选项
:
var fd = new FormData(document.getElementById("fileinfo")); fd.append("CustomField", "This is some extra data"); $.ajax({url: "stash.php",type: "POST",data: fd,processData: false, // 告诉jQuery不要去处理发送的数据contentType: false // 告诉jQuery不要去设置Content-Type请求头 });
原文:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
转自:使用FormData对象
使用FormData对象相关推荐
- FileReader对象和FormData对象
FormData对象 一.概述 FormData就是表单数据,我们提交表单所用的数据,H5里新加了FormData对象,可以让我们对表单数据进行操作,甚至自己组装表单数据进行提交,而不是单纯的仅仅是页 ...
- 移动端通过ajax上传图片(文件)并在前台展示——通过H5的FormData对象
前些时候遇到移动端需要上传图片和视频的问题,之前一直通过ajax异步的提交数据,所以在寻找通过ajax上传文件的方法.发现了H5里新增了一个FormData对象,通过这个对象可以直接绑定html中的f ...
- easyui form提交和formdata提交记录,查看FormData对象内部的值
1 easyui form提交 $('form').form('submit',{url:'';onSubmit:'';success:function(data){//这种方法获取到的data是字 ...
- 利用FormData对象实现AJAX文件上传功能及后端实现
包括HTML基础设置.CSS界面优化.JS利用FormData对象和AJAX进行上传.后端接收文件并存储到指定路径以及删除文件操作. FE HTML 基础的设置: <form enctype=& ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- PHP结合HTML5使用FormData对象提交表单及上传图片
FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台.在使用Ajax提交时,使用FormData对象可以减少拼接queryString的 ...
- JavaScript FormData对象,FileReader对象,files属性
一.ajax与FormData的使用 最近在使用ajax朝后端提交数据时,如果提交的数据都是普通键值对还好说,直接使用ajax默认的格式向后端提交即可. $('#d1').click(function ...
- FormData对象
FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用FormData对象可以减少拼接queryString的工作量(q ...
- html5表单提交json数据库,使用html5的FormData对象,通过 Ajax表单异步提交文件数据...
每次在向服务器提交文件对象数据是,总是需要借助各种三方插件来实现表单异步提交功能,还要为不同的界面去定制不同的插件css,相当繁琐.XMLHttpRequest Level 2 添加了一个新的接口-- ...
最新文章
- 数据蒋堂 | 用HBase做高性能键值查询?
- 网站优化中需要关注哪些对网站排名有关的内容呢?
- 谁的bug? 正则 拷贝和粘贴 regulator工具
- Spark 架构原理介绍 以及 job、task、stag 概念
- 第一周冲刺_周三总结
- c#中获取服务器IP,客户端IP以及Request.ServerVariables详细说明
- 设置Windows 8.1屏幕自己主动旋转代码, Auto-rotate function code
- Wireshark初步入门
- 综合评价方法之秩和比法(RSR)
- 华硕飞行堡垒atk驱动在哪_11月8日华硕再撒大额福利 满减优惠价机不可失_第1页...
- 显示技术发展方向:柔性化、薄膜化、微小化、阵列化
- 为什么想从测试转开发
- TJA1042T/3与国产CAN芯片SIT1042T/3性能对比
- Java获取本地ip地址
- Grown Up Digital: How the Net Generation is Changing Your World
- 【图像分割】基于模糊核聚类算法KFCM实现医学图像分割matlab代码
- ipad html兼容问题,如何处理ipad safari CSS 样式的兼容性?_html/css_WEB-ITnose
- UE4使用MixAmo中的角色与动画
- 信号处理--冲激和冲激串的傅里叶变换
- python基于PHP+MySQL的在线考试系统
热门文章
- Running(POJ-3661)
- 信息学奥赛一本通C++语言——1069:乘方计算
- 计算机网络作用是什么,计算机网络的作用是什么
- usnews美国大学计算机科学排名,2019年usnews美国大学计算机科学排名
- python min函数 索引_使用列表中的max()/ min()获取返回的max或min项的索引
- python 无头浏览器xhr 文件_Python对Selenium调用浏览器进行封装包括启用无头浏览器,及对应的浏览器配置文件...
- python热成像_盘点Terabee传感器家族:TOF测距、3D相机、热成像
- libpng warning: iCCP: known incorrect sRGB profile
- Bootstrap-CSS-排版
- 资源:代码舞动动画 提供gif图片(含程序、源码、下载地址)