HTML5 FormData 与无刷新文件上传

23,172次阅读

共计 2732 个字符，预计需要花费 7 分钟才能阅读完成。

提醒：本文最后更新于2017-06-22 11:25，文中所关联的信息可能已发生改变，请知悉！

无刷新文件上传是一个常见而又有点复杂的问题，常见的解决方案是构造 iframe 方式实现。

在 HTML5 中提供了一个 FormData 对象 API，通过 FormData 可以方便地构造一个表单请求，并通过 XMLHttpRequest 来发送。通过 FormData 对象发送文件也是可以的，如此则无刷新上传就变的非常简单了。

那么 FormData 怎么使用呢？下面志文工作室对此进行简单的介绍。

想得到一个FormData对象很简单：

var fd = new FormData();

FormData 对象只提供了一个方法 append ，用于向对象中添加表单请求参数。
在当前主流浏览器中，可通过如下两种方式获取或修改FormData。

方法一：创建一个空的FormData对象，然后再用append方法逐个添加键值对。示例：

 var fd = new FormData();
fd.append("name", "志文工作室");
fd.append("blog", "http://lzw.me");
fd.append("file", document.getElementById("file"));

这种方法可以不需要 HTML 的表单对象存在。

方法二：取得form元素对象，将它作为参数传入FormData对象中。示例：

 var formobj = document.getElementById("form");
var fd = new FormData(formobj);

当然，这里还可以使用 append 方法继续向 fd 中添加其他参数。

得到 FormData 对象了，如何发送请求呢？ FormData 对象主要用于增强型的 XMLHttpRequest 对象的 send 方法中。参考如下示例：

 var xhr = new XMLHttpRequest();       
xhr.open("POST" ,"http://lzw.me" , true);
xhr.send(fd);
xhr.onload = function(e) {
    if (this.status == 200) {
       alert(this.responseText);
    }
};

在 jQuery 的 ajax 方法中，也可使用 FormData 方式实现无刷新上传。但要注意参数的设置，参考如下：

 $.ajax({
    url: "http://lzw.me",
    type: 'POST',
    data: fd,
    /**
     *必须false才会自动加上正确的Content-Type
     */
    contentType:false,
    /**
     * 必须false才会避开jQuery对 formdata 的默认处理
     * XMLHttpRequest会对 formdata 进行正确的处理
     */
    processData:false
}).done(function(result){
    console.log(result);
}).fail(function(err){
    console.log(err);
});

 <?php
//php 接收表单提交信息并打印
if( isset( $_REQUEST['do']) ){
    var_dump($_REQUEST);
    var_dump($_FILES);
    die();
}
 
?>
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>FormData Test - lzw.me</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <form id="form">
            <input type="file" name="file" id="file" />
            <input type="text" name="name" id="" value="志文工作室" />
            <input type="text" name="blog" id="" value="http://lzw.me" />
            <input type="submit" name="do" id="do" value="submit" />
        </form>
        <script>
        $("form").submit(function(e){
            e.preventDefault();
            
            //空对象然后添加
            var fd = new FormData();
            fd.append("name", "志文工作室");
            fd.append("blog", "http://lzw.me");
            fd.append("file", document.getElementById("file"));
            //fd.append("file", $(":file")[0].files[0]); //jQuery 方式
            fd.append("do", "submit");
            
            //通过表单对象创建 FormData
            var fd = new FormData(document.getElementById("form"));
            //var fd = new FormData($("form:eq(0)")[0]); //jquery 方式
            
            //XMLHttpRequest 原生方式发送请求
            var xhr = new XMLHttpRequest();       
            xhr.open("POST" ,"" , true);
            xhr.send(fd);
            xhr.onload = function(e) {
                if (this.status == 200) {
                   alert(this.responseText);
                };
            };
            return;
            //jQuery 方式发送请求
            $.ajax({
                type:"post",
                //url:"",
                data: fd,
                processData: false,
                contentType: false
            }).done(function(res){
                console.log(res);
            });
            
            return false;
        });
        </script>
    </body>
</html>

http://www.oschina.net/code/snippet_200893_26533
http://achun.iteye.com/blog/1763771
http://www.cnblogs.com/rubylouvre/archive/2011/04/26/2028827.html
http://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
http://itindex.net/blog/2012/04/14/1334367483953.html

正文完

发表至：前端开发

2014-08-11

转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。

Node.js 应用中实现 OCR 验证码识别

实现基于项目约定的 ajax 通用性封装

Sublime text 中找不到 zend coding？试一试 emmet！

npm 仓库私有包离线化安装方案

HTML5 postMessage 消息传输与 POST 跨域通信

grunt 快速入门：使用 grunt 自动化构建工具进行前端开发

评论（8 条评论）

亲亲宝呗评论达人 LV.1

2017-06-20 14:27:25 回复

Google Chrome 59.0.3071.86

Windows 7 x64 Edition

 var formData = new FormData(); formData.append('files',document.getElementById(zimg).files[0]); formData.append('files',document.getElementById(fimg).files[0]); formData.append('cardNo',cardNo); formData.append('cardId',cardId); formData.append('cardName',cardName); formData.append('authToken',$("#authToken").val()); $.ajax({ type : 'post', data : formData, processData: false, contentType: false, url : '/order/saveOrModify2CardInfo.sc?r='+ Math.random(), success : function(d) { //alert("data="+data); if (d.state == "not_pass"){ alert(d.msg); return; } //照片上传成功之后,需要隐藏上传照片的动作 $(".idcard_text").attr("disabled",false).attr("readOnly",false).val(cardsInfo.cardNo); $(".IDcardmsg").hide(); $("#save_butten").hide(); }, error:function(err){alert("err="+err); }

求大神给看看，我这个写的。老是提示 “ 400 Bad Request ”

Windows Chrome 中国北京北京市联通

任侠

2017-06-21 17:26:36 回复

Google Chrome 58.0.3029.110

Windows 7 x64 Edition

@亲亲宝呗 400 表明后端处理错误，具体应该调试后端代码来查看详情。
有一点是，你的 demo 里上传了两个文件，多文件上传应该使用数组方式的名称。应该这样来写：

formData.append('files[]',document.getElementById(zimg).files[0]);formData.append('files[]',document.getElementById(fimg).files[0]);

Windows Chrome 中国广东省珠海市电信

上官杨评论达人 LV.1

2017-04-10 10:48:21 回复

Google Chrome 56.0.2924.87

Windows 7 x64 Edition

var formData = new FormData($(‘form’)[0]);new出来的formData是个空对象，为什么？

Windows Chrome 中国福建省厦门市电信

任侠

2017-04-12 10:40:17 回复

Google Chrome 57.0.2987.133

Windows 7 x64 Edition

@上官杨先看看你的 $('form')[0] 是否得到了表单的 dom 对象

Windows Chrome 中国广东省珠海市电信

12222 评论达人 LV.1

2015-07-31 17:29:17 回复

Firefox 39.0

Windows 7 x64 Edition

Windows Firefox 中国上海上海市电信

php程序员评论达人 LV.1

2014-08-18 17:28:54 回复

Google Chrome 21.0.1180.89

Windows XP

现在不少都使用了无刷新AJAX技术。

Windows Chrome 内网IP

林三评论达人 LV.1

2014-08-14 13:41:27 回复

Google Chrome 38.0.2114.2

Windows XP

无刷新好啊，刷新页面有的时候把刚才要做的事情给丢失了，且浪费流量的说。虽然没有研究PHP的文件，但这样的笔记已经够赞！

Windows Chrome 内网IP

任侠

2014-08-24 15:15:36 回复

Google Chrome 34.0.1847.131

Windows 8.1 x64 Edition

@林三 FormData 这个与php无关，是浏览器端的事情，只是后端用PHP来做示例

Windows Chrome 内网IP

HTML5 FormData 与无刷新文件上传

1. 构造 FormData 对象

2. FormData 发送请求

3. jquery 中使用 FormData

4. 一个完整的示例（包含PHP处理示例）

5. 相关参考

基于 opencv4nodejs 实现 OCR 验证码识别搭建私有 OCR 服务

详细！离线部署大模型：ollama+deepseek+open-webui安装使用方法及常见问题解决

一个自定义脚本，解决青龙面板任务通知的消息轰炸问题

iOS 应用持续集成：将 macOS 添加为 jenkins slave 节点

Python 环境管理工具 Miniconda 的安装、配置与使用

免费电影网站的另一种打开方式：批量下载、边看边播不卡顿、支持 Docker 部署、永久免费！

使用 RSS 订阅：个人高效阅读知识补充指南

高性能 Python 包管理器 uv 的安装与使用

Dify 工作流执行自定义代码报错：`Run failed: error: operation not permitted`

Python 环境管理工具 Miniconda 的安装、配置与使用

	var fd = new FormData();
	fd.append("name", "志文工作室");
	fd.append("blog", "http://lzw.me");
	fd.append("file", document.getElementById("file"));

	var formobj = document.getElementById("form");
	var fd = new FormData(formobj);

	var xhr = new XMLHttpRequest();
	xhr.open("POST" ,"http://lzw.me" , true);
	xhr.send(fd);
	xhr.onload = function(e) {
	if (this.status == 200) {
	alert(this.responseText);
	}
	};

	$.ajax({
	url: "http://lzw.me",
	type: 'POST',
	data: fd,
	/**
	*必须false才会自动加上正确的Content-Type
	*/
	contentType:false,
	/**
	* 必须false才会避开jQuery对 formdata 的默认处理
	* XMLHttpRequest会对 formdata 进行正确的处理
	*/
	processData:false
	}).done(function(result){
	console.log(result);
	}).fail(function(err){
	console.log(err);
	});

	<?php
	//php 接收表单提交信息并打印
	if( isset( $_REQUEST['do']) ){
	var_dump($_REQUEST);
	var_dump($_FILES);
	die();
	}

	?>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>FormData Test - lzw.me</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
	<form id="form">
	<input type="file" name="file" id="file" />
	<input type="text" name="name" id="" value="志文工作室" />
	<input type="text" name="blog" id="" value="http://lzw.me" />
	<input type="submit" name="do" id="do" value="submit" />
	</form>
	<script>
	$("form").submit(function(e){
	e.preventDefault();

	//空对象然后添加
	var fd = new FormData();
	fd.append("name", "志文工作室");
	fd.append("blog", "http://lzw.me");
	fd.append("file", document.getElementById("file"));
	//fd.append("file", $(":file")[0].files[0]); //jQuery 方式
	fd.append("do", "submit");

	//通过表单对象创建 FormData
	var fd = new FormData(document.getElementById("form"));
	//var fd = new FormData($("form:eq(0)")[0]); //jquery 方式

	//XMLHttpRequest 原生方式发送请求
	var xhr = new XMLHttpRequest();
	xhr.open("POST" ,"" , true);
	xhr.send(fd);
	xhr.onload = function(e) {
	if (this.status == 200) {
	alert(this.responseText);
	};
	};
	return;
	//jQuery 方式发送请求
	$.ajax({
	type:"post",
	//url:"",
	data: fd,
	processData: false,
	contentType: false
	}).done(function(res){
	console.log(res);
	});

	return false;
	});
	</script>
	</body>
	</html>