参考demo如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DEMO-上传文件</title> </head> <body> <!-- 以a.qq.com上传到b.qq.com/upload/为例 --> <form action="http://b.qq.com/upload/" enctype="multipart/form-data" method="post" target="postframe"> <!-- 文件上传按钮 --> <input type="file" /> <!-- 隐藏的附加字段 --> <input type="hidden" value="test1" /> <input type="hidden" value="test2" /> </form> <iframe src="" frameborder="0"></iframe> <script> //监听文件基本信息 $("[name=file_1]").change(function(e){ var files=e.target.files; if("undefined" == typeof files && e.target.value){ //IE9- files=[]; try{ files=[new ActiveXObject("Scripting.FileSystemObject").GetFile(e.target.value)]; }catch(err){ files=[{ name:e.target.value, type:"unkown" }]; } if(!files.length){ files=[{ name:e.target.value, type:"unkown" }]; } } //获取文件信息 console.log(files); }) //上传 $("[name=fileform]").submit(); //回调 window.fileCallback=function(result){ //处理result console.log("文件上传成功"); } </script> </body> </html>总结 本文给出了笔者在实际工作中遇到的最常见的去Flash改造的三种场景,现以表格的形式简单概括如下:
现代H5 早期低版本IE等视频播放 使用H5的video标签 没办法只能使用FLash,如果不用Flash,建议提醒用户升级浏览器
跨域提交请求 使用CORS,前后端结合 中转代理(PostMessage或者降域)
Ajax文件上传 使用FileReader+FormData封装 模拟表单提交到iframe
结语
去Flash不仅是对实现方案的一种兼容改造,更是对早已成熟的新技术新思路的运用。目前而言,不管是因为政策原因,还是因为性能或者其它兼容性原因,去Flash改造都是重要和紧迫的,本文是笔者在实际工作过程中总结出的最常见的三种去Flash场景和改造方案,供参考,不足之处还请不吝指正。
相关阅读
再论 ASP.NET 中获取客户端IP地址
从零开始的Spring Session
【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识