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请求并上传文件的更多相关文章

  1. 使用FormData,进行Ajax请求并上传文件

    前段时间做了个手机端的图片上传,为了用户体验,用ajax交互,发现了FromData对象,这里有详细解释https://developer.mozilla.org/zh-CN/docs/Web/API ...

  2. 请求与上传文件,Session简介,Restful API,Nodemon

    作者 | Jeskson 来源 | 达达前端小酒馆 请求与上传文件 GET请求和POST请求 const express = require('express'); const app = expre ...

  3. Django学习——ajax发送其他请求、上传文件(ajax和form两种方式)、ajax上传json格式、 Django内置序列化(了解)、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  4. ajax无刷新上传文件

    网页上传文件最简单的方式就是通过表单上传了,但是在提交表单的时候会导致网页刷新,但有的时候我们不想网页刷新,有什么办法呢,我们可以使用ajax上传文件来做到这一点.只有ajax还不行,还需要JavaS ...

  5. HTML5+AJAX原生分块上传文件的关键参数设置

    processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务 ...

  6. ajax:html5上传文件,上传之前可以实现本地预览

    本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...

  7. ajax json用法 上传文件 登录

     1. json  json  是一种数据结构  跨平台跨语言   1. python中json数据的转换   1.数据类型    字符串 数字 布尔值 列表 字典 None       2. 序列化 ...

  8. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

  9. c#代码发送post请求,上传文件(并带其他参数)

    本人对post理解不深,前段时间遇到一个需要用c#代码发送post请求上传文件的业务,于是参考了几篇帖子,加上自身实践写出了如下代码.写的比较low 望各位大大指正^_^. 业务需求: 对方给了一个接 ...

随机推荐

  1. Xcode 10 Archive 时电脑卡死

    Xcode 10 Archive Unity5.x 导出工程时电脑卡死.解决办法:Targets - Build Settings - Debug Information Format 设置成DWAR ...

  2. 代码实现排列组合【Java】

    一.代码实现 package zhen; import java.util.Arrays; public class Arrangement { /** * 计算阶乘数,即n! = n * (n-1) ...

  3. python系列:一、Urllib库的基本使用

    开篇介绍: 因为我本人也是初学者,爬虫的例子大部分都是学习资料上面来的,只是自己手敲了一遍,同时加上自己的理解. 写得不好请多谅解,如果有错误之处请多赐教. 我本人的开发环境是vscode,pytho ...

  4. python连接mysql服务端

    python连接mysql的客户端 import pymysql # 导入模块 conn = pymysql.connect( host='127.0.0.1', # 主机模块 port=3306, ...

  5. java中的偏序关系

    从半个多月前接到阿里的面试电话,被多线程问题难住,到今天终于读完了<Java Concurrency In Practice>.想总结一下,又发现自己没有能力将一本书的内容都概括下来.还是 ...

  6. Java中的乐观锁

    1.前言 之前好几次看到有人在面经中提到了乐观锁与悲观锁,但是一本<Java Concurrency In Practice>快看完了都没有见到过这两种锁,今天终于在第15章发现了它们的踪 ...

  7. C++(四十五) — 类型转换(static_cast、dynamic_cast 、const_cast、reinterpreter_cast)

     0.总结 (1)要转换的变量,转换前.转换后.转换后的结果. (2)一般情况下,避免进行类型转换. 1._static_cast(静态类型转换,int 转换为char) 格式:TYPE B = st ...

  8. requireJS的基本使用

    requireJS的基本使用 一.总结 一句话总结: requireJS是js端模块化开发,主要是实现js的异步加载,和管理模块之间的依赖关系,便于代码的编写和维护 1.页面加载的js文件过多的缺点是 ...

  9. 实用Golang库

    框架: 1. Golang轻量级并发服务器框架: zinx / https://www.jianshu.com/p/23d07c0a28e52. 国内谢大牛模仿django制作的重框架: beego3 ...

  10. [Codeforces 1242B]0-1 MST

    Description 题库链接 给你一张 \(n\) 个点的完全图,其中有 \(m\) 条边长度为 \(1\),其余全为 \(0\).问你这张图的最小生成树为多少. \(1\leq n\leq 10 ...