HTML5 FormData 与无刷新文件上传

目录
[隐藏]

 

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

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

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

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

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

点赞 (0)
  1. 亲亲宝呗说道:
    Google Chrome 59.0.3071.86 Google Chrome 59.0.3071.86 Windows 7 x64 Edition 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 ”

    1. 任侠说道:
      Google Chrome 58.0.3029.110 Google Chrome 58.0.3029.110 Windows 7 x64 Edition Windows 7 x64 Edition

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

      formData.append('files[]',document.getElementById(zimg).files[0]);
      formData.append('files[]',document.getElementById(fimg).files[0]);
      
  2. 上官杨说道:
    Google Chrome 56.0.2924.87 Google Chrome 56.0.2924.87 Windows 7 x64 Edition Windows 7 x64 Edition

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

    1. 任侠说道:
      Google Chrome 57.0.2987.133 Google Chrome 57.0.2987.133 Windows 7 x64 Edition Windows 7 x64 Edition

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

  3. 12222说道:
    Firefox 39.0 Firefox 39.0 Windows 7 x64 Edition Windows 7 x64 Edition

    :???: :smile:

  4. php程序员说道:
    Google Chrome 21.0.1180.89 Google Chrome 21.0.1180.89 Windows XP Windows XP

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

  5. 林三说道:
    Google Chrome 38.0.2114.2 Google Chrome 38.0.2114.2 Windows XP Windows XP

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

    1. 任侠说道:
      Google Chrome 34.0.1847.131 Google Chrome 34.0.1847.131 Windows 8.1 x64 Edition Windows 8.1 x64 Edition

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

回复 任侠 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Captcha Code