ajax中的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对象的append方法，除了可以添加文件，还可以添加二进制对象（Blob)或者是字符串

// Files
formData.append(name, file, filename);

// Blobs
formData.append(name, blob, filename);

// Strings
formData.append(name, value);   

append方法的第一个参数是表单的控件名（name属性），第二个参数是实际的值，第三个参数是可选的，通常是文件名。

FormData实现文件的异步上传：

1. <form action="javascript:void(0);" enctype="multipart/form-data">
2. <input type="file" name="file" />
3. <button type="button">上传</button>
4. </form>
5. <script src="js/jquery.min.js"></script>
6. <script>
7. //直接form方式创建formdata对象
8. function onsub(){
9. var data = new FormData($("form")[0]);
10. $.ajax({
11. async: true,
12. type: "post",
13. url: "asyncupload",
14. data: data,
15. dataType: "json",
16. success: function(data){
17. alert("上传成功");
18. },
19. error: fucntion(xhr){
20. alert("服务器环境异常");
21. }
22. };
23. //手动添加文件至formdata
24. function onsub2(){
25. var data = new FormData();
26. data.append("file",$("form input").files[0]);
27. $.ajax({
28. async: true,
29. type: "post",
30. url: "asyncupload",
31. data: data,
32. dataType: "json",
33. success: function(data){
34. alert("上传成功");
35. },
36. error: fucntion(xhr){
37. alert("服务器环境异常");
38. }
39. });
40. $("form button").click(onsub);
41. </script>