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. FFmpeg--如何同步音视频的解决方案

    如何同步视频 PTS和DTS 幸运的是,音频和视频流都有一些关于以多快速度和什么时间来播放它们的信息在里面.音频流有采样,视频流有每秒的帧率.然而,如果我们只是简单的通过数帧和乘以帧率的方式来同步视频 ...

  2. 使用SAP open connector调用第三方系统的API

    我们把hubspot这个SaaS CRM作为第三方系统,首先登录hubspot,创建一个新的API key: 把创建的key拷贝到剪切板里: 然后登录SAP Cloud for Customer上的o ...

  3. 精选SpringBoot八大开源项目:支付、秒杀、全文搜索等

    前言 曾在自己的博客中写下这样一段话:有一种力量无人能抵挡,它永不言败生来倔强.有一种理想照亮了迷茫,在那写满荣耀的地方. 如今,虽然没有大理想抱负,但是却有自己的小计划.下面是这一年来,自己利用闲暇 ...

  4. Mysql 库表操作初识

    Mysql 库表操作初识 终端登录mysql 这里只演示win下, cmd 终端. 至于怎么在win下, linux, mac安装, 感觉这是一个入门级的百度搜索问题, 安装都搞不定, 确实有点尴尬, ...

  5. linux服务器中查看图片

    在图片目录下使用命令行:基于python3 python -m http.server 1 python2可能是: python -m SimpleHTTPServer 1 然后在浏览器输入服务器IP ...

  6. Pthon魔术方法(Magic Methods)-可视化

    Pthon魔术方法(Magic Methods)-可视化 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.关于可视化的魔术方法简介 __str__: str()函数,format ...

  7. 2019-2020-1 20199301《Linux内核原理与分析》第九周作业

    第八章 进程的切换和系统的一般执行过程 进程的调度实际与进程的切换 ntel定义的中断类型 硬中断:就是CPU的两根引脚(可屏蔽中断和不可屏蔽中断) 软中断/异常:包括除零错误.系统调用.调试断点等在 ...

  8. 互联网UV,PU,TopN统计

    1. UV.PV.TopN概念 1.1 UV(unique visitor) 即独立访客数 指访问某个站点或点击某个网页的不同IP地址的人数.在同一天内,UV只记录第一次进入网站的具有独立IP的访问者 ...

  9. 珠峰 - 郭永峰react课程 node es6 babel学习笔记

    npm install babel-cli -g //安装babel babel index.js -o a.js //等同于 babel index.js --out-file a.js 复制ind ...

  10. Asia Jakarta Regional Contest 2019 I - Mission Possible

    cf的地址 因为校强, "咕咕十段"队获得了EC-final的参赛资格 因为我弱, "咕咕十段"队现在银面很大 于是咕咕十段决定进行训练. 周末vp了一场, 这 ...