简述三种异步上传文件方式

　　很久没写过博客了！

　　上次写已经是去年的12月了，离现在也有足足三个月了。这几个月因为要搭建个人网站以及准备个人简历，包括最近要准备最近的各大公司的实习春招，很难抽时间来写博客，这次的异步文件上传我觉得是很有必要了解的，笼络了很多知识点，因此准备写一篇博客来巩固下。

　　异步上传文件是为了更好的用户体验，是每个前端必须掌握的技能。这里我提出三点有关异步文件上传的方式。

　　　　使用第三方控件，如Flash,ActiveX等浏览器插件上传。

　　　　使用隐藏的iframe模拟异步上传。

　　　　使用XMLHttpRequest2来实现异步上传。

　　第一种使用浏览器插件上传，需要一定的底层编码功底，在这里我就不讲了，以免误人子弟，提出这点大家可以自行百度。

　　第二种使用隐藏的iframe模拟异步上传。为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中，所以才没有使当前页面跳转，感觉就像是异步操作一样。

　　先贴出代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>隐藏的iframe上传文件</title>
 6     <script type="text/javascript" src="jquery路径..."></script>
 7 </head>
 8 <body>
 9     <iframe name="frm" style="display:none"></iframe>
10     <form action="/upload2" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);">
11         <p ></p>
12         <p >
13             <span >正在上传...</span></p>
14     </form>
15     <div ></div>
16 <script>
17     // 上传完成后的回调
18     function uploadFinished(fileName) {
19         addToFlist(fileName);
20         loading(false);
21     }
22     
23     function addToFlist(fname) {
24         var temp = ["<p id='" + fname + "'>",
25                     fname,
26             "<button onclick='delFile(\"" + fname + "\");'>删除</button>",
27                     "</p>"
28                     ];
29         $("#flist").append(temp.join(""));
30     }
31 
32     function loading(showloading) {
33         if (showloading) {
34             $("#uptxt").show();
35         } else {
36             $("#uptxt").hide();
37         }
38     }
39 </script>
40 </body>
41 </html>

View Code