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>