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

最新推荐文章于 2021-07-31 12:52:47 发布

你不知道的sharlly

最新推荐文章于 2021-07-31 12:52:47 发布

阅读量7.1k

点赞数 3

本文链接：https://blog.csdn.net/yingxiaoqiang520/article/details/56677642

版权

本文介绍了三种异步文件上传方法：使用第三方插件（如Flash, ActiveX）、通过隐藏iframe模拟异步上传和利用XMLHttpRequest2。重点讨论了iframe和XMLHttpRequest2的实现细节，包括关键代码示例和事件监听。文章强调了每种方法的优缺点，如第三方插件的交互性和性能优势，iframe的兼容性以及XMLHttpRequest2的交互性和可控性。" 127051763,9545890,超自动化驱动：RPA引领智能制造新篇章,"['RPA', '自动化', '制造', '数字化转型', '云扩科技']

摘要由CSDN通过智能技术生成

很久没写过博客了！

　　上次写已经是去年的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" οnsubmit="loading(true);">
11         <p id="upfile">附件： <input type="file" name="myfile" style="display: inline"></p>
12         <p id="upbtn"><input style="padding-left:50px;padding-right: 50px;" type="submit" value="异步上传">
13             <span id="uptxt" style="display: none">正在上传...</span></p>
14     </form>
15     <div id="flist" style="border:1px dotted darkgray;"></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 οnclick='delFile(\"" + fname + "\");'>删除</button>",
27                     "&l