HTML5 FormData 与无刷新文件上传

2014-08-11 6 条评论 22,777 次阅读被赞了 0 次

本文发布于：2014-08-11，最后更新于：2017-06-22，如果内容失效请留言告知。

[隐藏]

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

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

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

1. 构造 FormData 对象

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

1	`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 中添加其他参数。

2. FormData 发送请求

得到 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);
    }
};

3. jquery 中使用 FormData

在 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);
});

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

<?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>

5. 相关参考

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

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

亲亲宝呗说道：

2017年06月20日 2:27 下午

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 ”

任侠说道：

2017年06月21日 5:26 下午

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]);
```
回复

上官杨说道：

2017年04月10日 10:48 上午

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

回复
1. 任侠说道：
  
  2017年04月12日 10:40 上午
  
  Google Chrome 57.0.2987.133 Windows 7 x64 Edition
  先看看你的 $('form')[0] 是否得到了表单的 dom 对象
  
  回复
12222说道：

2015年07月31日 5:29 下午

Firefox 39.0 Windows 7 x64 Edition
:???:

回复
php程序员说道：

2014年08月18日 5:28 下午

Google Chrome 21.0.1180.89 Windows XP
现在不少都使用了无刷新AJAX技术。

回复
林三说道：

2014年08月14日 1:41 下午

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

回复
1. 任侠说道：
  
  2014年08月24日 3:15 下午
  
  Google Chrome 34.0.1847.131 Windows 8.1 x64 Edition
  FormData 这个与php无关，是浏览器端的事情，只是后端用PHP来做示例
  
  回复

1. 构造 FormData 对象

2. FormData 发送请求

3. jquery 中使用 FormData

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

5. 相关参考

相关文章:

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

回复 亲亲宝呗 取消回复

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

回复亲亲宝呗取消回复