为什么使用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对象的append方法,除了可以添加文件,还可以添加二进制对象(Blob)或者是字符串
// Files
formData.append(name, file, filename);
// Blobs
formData.append(name, blob, filename);
// Strings
formData.append(name, value);
append方法的第一个参数是表单的控件名(name属性),第二个参数是实际的值,第三个参数是可选的,通常是文件名。
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>