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. 使用虹软ArcFac,java 离线SDK 进行人脸识别

    公司项目需要人脸识别登录,需要支持离线识别,所以无法使用在线的人脸识别的API,于是使用到了离线SDK来对比识别人脸相识度. 获取人脸抓拍的图片需要对接设备,这里不做记录,假设我们已经获取到了人脸图片 ...

  2. C#操作mongodb(聚合函数)-分组找出每组的最大值

    public static void OnQuery_QXData(string DBName, string tablename,string layername)        {         ...

  3. JavaScript 相关的工具代码

    博客地址:https://ainyi.com/49 记录一些数据处理需要的方法工具代码 持续更新中... 时间戳转与日期格式相互转换 时间戳转换成日期格式 function timestampToTi ...

  4. day 14作业

    作业 现有文件info.txt, 其内容如下: alpha male 18 1000 bravo male 28 2000 charlie female 38 3000 delta female 48 ...

  5. 浅谈HDFS(三)之DataNote

    DataNode工作机制 一个数据块在DataNode上以文件形式存储在磁盘上,包括两个文件,一个是数据本身,一个是元数据包括数据块的长度,块数据的校验和,以及时间戳. DataNode启动后向Nam ...

  6. C++的struct可以使用template

    C++里面的struct是可以使用template的,然而http://c.biancheng.net/view/2235.html这里竟然说不能用.辣鸡啊. #include <stdio.h ...

  7. 原生ajax解析&封装原生ajax函数

    前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...

  8. python关于time几种格式处理方法总结

    一.日期时间的表示方法: 时间戳 timestamp: 简介:时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量,是一个float类型 展示形式:1575278720.331 时间 ...

  9. JSX 到 JS 的转换

    在写react代码的时候,大部分同学应该都是写JSX.因为相比于写纯JavaScript.写JSX为我们去写组件,比写一些在JavaScript当中写类似于html结构的这种代码是要方便非常非常多的, ...

  10. Ranger安装部署 - solr安装

    1. 概述 Lucene是一个Java语言编写的利用倒排原理实现的文本检索类库: Solr是以Lucene为基础实现的文本检索应用服务.Solr部署方式有单机方式.多机Master-Slaver方法. ...