H5 FormData对象的使用——进行Ajax请求并上传文件
XMLHttpRequest Level2 添加了一个新的接口——FormData 。【 主要用于发送表单数据,但也可以独立使用于传输键控数据。与普通的Ajax相比,它能异步上传二进制文件 】
利用FormData对象,可通过js用一些键值对来模拟一系列表单控件,还可以使用XMLHttpRequest的send()方法异步提交表单。
首先,在之前的“前后台交互之传参方式”中讲了传统的form表单提交的方式(表单序列化),它只适用于传递一般参数,上传文件的文件流是无法被序列化并传递的。所以,使用FormData,可以轻松的和ajax结合进行文件上传。
一、在介绍使用FormData进行Ajax请求并上传文件之前,先来认识一下FormData以及它的使用:::::
W3C 草案提供了三种方案来获取或修改 Form Data :::
WAY1:创建一个空的 Form Data 对象,再用 append() 逐个添加键值对
var oMyForm = new FormData(); // 创建一个空的FormData对象
oMyForm.append("userName","Coco"); // append()方法添加字段
oMyForm.append("accountNum",123456); // 数字123456立即被转换成字符串“123456”
oMyForm.append("userFile",fileInputElement.files[0]); var oFileBody = "<a id="a"><b id="b">hey!</b></a>";
var oBlob = new Blob([oFileBody],{type:"text/html"}); // Blob对象包含的文件内容是oFileBody
oMyForm.append("webmasterfile",oBlob); var oReq = new XMLHttpRequest();
oReq.open("POST"," .php");
oPeq.send(oMyForm); // 使用XMLHttpRequest的send()把数据发送出去
上面的"userFile"和"webmasterfile"的值都包含了一个文件;
字段的值可以是一个Blob对象,File对象或者字符串,别的类型都会被自动转换成字符串——例如上面的"accountNum" 。
WAY2:取form元素对象作为参数传入FormData对象中
—— 伪代码 ——
var new_FormData = new FormData( someFormElement );
例:
var FormElement = document.getElementById("myFormElement");
var oReq = new XMLHttpRequest();
oReq.open("POST"," .php");
oReq.send(new FormData(FormData));
也可以在已有表单基础上继续添加新的键值对:
var FormElement = document.getElementById("myFormElement");
var formData = new FormData(FormElement);
formData.append("serialnumber",serialNumber++); var oReq = new XMLHttpRequest();
oReq.send(formData);
可以通过这种方式添加一些不想让用户编辑的固定字段,然后再发送。
WAY3:利用form对象的getFormData方法生成
var formobj = document.getElementById("myFormElement");
var formdata = formobj.getFormData();
利用 FormData 对象,结合原生的 js,通过 ajax 实现异步上传图片。当然,现在已有的 jquery 批量上传的插件,原理就是利用 FormData。
二、使用 FormData对象发送二进制文件::::::
way1:通过 form 表单来初始化 FormData
1、在 html 中有一个包含文件输入框的 form 元素
<form enctype="multipare/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>
2、异步上传用户所选的文件
function sendForm(){
var oOutput = document.getElementById("Output");
var oData = new FormData(document.forms.nameItem("fileInfo"));
oData.append("customField","This is some extra data"); var oReq = new XMLHttpRequest();
oReq.open("POST"," .php",true);
oReq.onload = function(oEvent){
if(oReq.status == 200){
oOutput.innerHTML = "Uploaded!";
}else{
oOutput.innerHTML = "Error" + oReq.status + "occurred uploading your file!"
}
};
oReq.send(oData);
}
WAY2:不借助 form 表单,直接向 FormData 对象中添加一个 File 对象或者一个 Blob 对象
var data = new FormData(); var oFileBody = "<a id="a"><b id="b">hey!</b></a>";
var oBlob = new Blob([oFileBody],{type:"text/html"}); data.append("myfile",oBlob);
如果 FormData 对象中某个字段值是一个 Blob 对象,在发送 HTTP 请求时,代表该 Blob 对象所包含文件的文件名的 “content-Disposition” 请求的值在不同浏览器中不同:
Firefox 使用固定的字符串 "blob",而 chrome使用一个随机字符串。
WAY3:使用 Jquery 发送 FormData(要正确设置相关项)
var fd =new FormData(document.getElementById("fileinfo"));
fd.append("customField","This is some extra data");
$.ajax({
url:" .php",
type:"POST",
data:fd,
processData:false, // 告诉jquery不要处理发送的数据
contentType:false // 告诉jquery不要设置content-Type请求头
});
三、例子
1、使用 FromData 进行 Ajax 请求,并上传文件
<form id="uploadForm">
指定文件名:<input type="text" name="filename" value="">
上传文件:<input type="file" name="file"> <input type="button" value="上传" onclick="doUpload()">
</form>
function doUpload(){
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
url:" .php",
type:"POST",
data:formData,
async:false,
cache:false,
contentType:false,
processData:false,
success:function(returndata){
alert(returndata);
},
error:function(returndata){
alert("error:"+returndata);
}
});
}
2、使用 FormData 提交表单及上传图片
<form name="form" id="formData"> name:<input type="text" name="name">
gender:<input type="radio" name="gender" value="1"> male
<input type="radio" name="gender" value="2"> female
photo:<input type="file" name="photo" id="photo"> <input type="button" name="btn" value="submit" onclick="submit();"> </form> <div id="result"></div>
function submit(){
var data = new FormData($("#formData")[0]);
$.ajax({
url:" .php",
type:"POST",
data:data,
dataType:"JSON",
cache:false,
processData:false,
contentType:false
}).done(function(ret){
if(ret["isSuccess"]){
var result = "";
result +="name=" + ret["name"] + "<br>";
result += "gender=" + ret["gender"] + "<br>";
result += "<img src='"+ret['photo']+"'width='100'>"; $("#result").html(result); // 提交成功后将表单数据显示在id="result"的div里面
}else{
alert("提交失败");
}
});
return false;
}
四、浏览器兼容性
Chrome | Firefox(Gecko) | IE | Opera | Safari |
7+ | 4.0(2.0)+ | 10+ | 12+ | 5+ |
H5 FormData对象的使用——进行Ajax请求并上传文件的更多相关文章
- 使用FormData,进行Ajax请求并上传文件
前段时间做了个手机端的图片上传,为了用户体验,用ajax交互,发现了FromData对象,这里有详细解释https://developer.mozilla.org/zh-CN/docs/Web/API ...
- 请求与上传文件,Session简介,Restful API,Nodemon
作者 | Jeskson 来源 | 达达前端小酒馆 请求与上传文件 GET请求和POST请求 const express = require('express'); const app = expre ...
- Django学习——ajax发送其他请求、上传文件(ajax和form两种方式)、ajax上传json格式、 Django内置序列化(了解)、分页器的使用
1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
- ajax无刷新上传文件
网页上传文件最简单的方式就是通过表单上传了,但是在提交表单的时候会导致网页刷新,但有的时候我们不想网页刷新,有什么办法呢,我们可以使用ajax上传文件来做到这一点.只有ajax还不行,还需要JavaS ...
- HTML5+AJAX原生分块上传文件的关键参数设置
processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务 ...
- ajax:html5上传文件,上传之前可以实现本地预览
本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...
- ajax json用法 上传文件 登录
1. json json 是一种数据结构 跨平台跨语言 1. python中json数据的转换 1.数据类型 字符串 数字 布尔值 列表 字典 None 2. 序列化 ...
- Ajax 无刷新上传文件插件 uploadify 的使用
在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...
- c#代码发送post请求,上传文件(并带其他参数)
本人对post理解不深,前段时间遇到一个需要用c#代码发送post请求上传文件的业务,于是参考了几篇帖子,加上自身实践写出了如下代码.写的比较low 望各位大大指正^_^. 业务需求: 对方给了一个接 ...
随机推荐
- Xcode 10 Archive 时电脑卡死
Xcode 10 Archive Unity5.x 导出工程时电脑卡死.解决办法:Targets - Build Settings - Debug Information Format 设置成DWAR ...
- 代码实现排列组合【Java】
一.代码实现 package zhen; import java.util.Arrays; public class Arrangement { /** * 计算阶乘数,即n! = n * (n-1) ...
- python系列:一、Urllib库的基本使用
开篇介绍: 因为我本人也是初学者,爬虫的例子大部分都是学习资料上面来的,只是自己手敲了一遍,同时加上自己的理解. 写得不好请多谅解,如果有错误之处请多赐教. 我本人的开发环境是vscode,pytho ...
- python连接mysql服务端
python连接mysql的客户端 import pymysql # 导入模块 conn = pymysql.connect( host='127.0.0.1', # 主机模块 port=3306, ...
- java中的偏序关系
从半个多月前接到阿里的面试电话,被多线程问题难住,到今天终于读完了<Java Concurrency In Practice>.想总结一下,又发现自己没有能力将一本书的内容都概括下来.还是 ...
- Java中的乐观锁
1.前言 之前好几次看到有人在面经中提到了乐观锁与悲观锁,但是一本<Java Concurrency In Practice>快看完了都没有见到过这两种锁,今天终于在第15章发现了它们的踪 ...
- C++(四十五) — 类型转换(static_cast、dynamic_cast 、const_cast、reinterpreter_cast)
0.总结 (1)要转换的变量,转换前.转换后.转换后的结果. (2)一般情况下,避免进行类型转换. 1._static_cast(静态类型转换,int 转换为char) 格式:TYPE B = st ...
- requireJS的基本使用
requireJS的基本使用 一.总结 一句话总结: requireJS是js端模块化开发,主要是实现js的异步加载,和管理模块之间的依赖关系,便于代码的编写和维护 1.页面加载的js文件过多的缺点是 ...
- 实用Golang库
框架: 1. Golang轻量级并发服务器框架: zinx / https://www.jianshu.com/p/23d07c0a28e52. 国内谢大牛模仿django制作的重框架: beego3 ...
- [Codeforces 1242B]0-1 MST
Description 题库链接 给你一张 \(n\) 个点的完全图,其中有 \(m\) 条边长度为 \(1\),其余全为 \(0\).问你这张图的最小生成树为多少. \(1\leq n\leq 10 ...