FormData实现文件的异步上传

为什么要使用FormData？

在进行文件上传的操作时，我们通常使用post方式提交至服务器，然后服务器对请求数据进行处理；而有时候我们也需要进行异步上传文件，这个时候，就需要用到了FormData

FormData简单介绍

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

首先使用构造器来创建一个FormData对象，我们可以使用不传递任何参数来创建该对象，也可以提供一个form对象来创建该对象，通常这个form对象为一个文件上传的form表单对象

如果我们使用了无参构造器来创建formdata对象（比如进行文件上传时并没有使用form表单，而是多个div自定义组成的），这时候我们需要调用它的append方法手动添加数据到formdata中，append方法传入的参数为键值对，其值可以传入file类型的值

FormData实现文件的异步上传

<form action="javascript:void(0);" enctype="multipart/form-data">
    <input type="file" name="file" />
    <button type="button">上传</button>
</form>
<script src="js/jquery.min.js"></script>
<script>
    //直接form方式创建formdata对象
    function onsub(){
        var data = new FormData($("form")[0]);
        $.ajax({
            async: true,
            type: "post",
            url: "asyncupload",
            data: data,
            dataType: "json",
            success: function(data){
                alert("上传成功");
            },
            error: fucntion(xhr){
                alert("服务器环境异常");
            }
    };

    //手动添加文件至formdata
    function onsub2(){
        var data = new FormData();
        data.append("file",$("form input").files[0];
        $.ajax({
            async: true,
            type: "post",
            url: "asyncupload",
            data: data,
            dataType: "json",
            success: function(data){
                alert("上传成功");
            },
            error: fucntion(xhr){
                alert("服务器环境异常");
            }
    };
    $("form button").click(onsub);
</script>