flash + html5 实现浏览器兼容的文件上传方案
|
一、前言 ? ? ? 前些日子发了一篇文章，介绍了自己写的一个html5文件上传插件，链接：http://www.voidcn.com/article/p-qznclrjt-pv.html? 。在支持html5的浏览器下可实现轻松的文件上传，而且支持多文件、显示进度条。但在实际的项目中，往往要支持多种浏览器，在低版本的浏览器中，无法很好的支持html5，就必须考虑其他的方案。因需要展示进度条等，所以flash往往是很好的选择。在此不得不提uploadify，是一款优秀的上传插件，提供很多个性化的配置参数，其官方有flash和html5两个版本，但html5版本是要收费的。对于习惯用免费的国人来说，这显然是很不好的事情，还好，我已山寨出一个html5版本，基本的api均已实现，可以满足我的项目中的需求了。在我的项目中，页面需要支持PC和移动端设备，所以需要根据不同的设备、浏览器来调用不同版本的上传插件。那么，今天就来介绍，我是如何在项目中使用flash和html5解决文件上传兼容的。 二、概述 ? ? ? 我拥有两个插件，一个是flash版本的uploadify，免费的。另一个是自己写的html5版本的，名叫html5uploader(好俗的名字。。)，再加一个适配器uploadadapter，用来决定在什么时候调用哪个插件。页面中只调用uploadadapter。关键的难题就在于，页面中的代码是只写一次的，不管是flash的还是html5的都得能识别出页面上的参数，这也就是我的山寨版本的插件做的事情，原flash版本的配置参数通通得识别并有效。幸好，已经实现了。 三、上demo ? ? ? 很多东西，一上demo就都清楚了。。。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.uploadadapter.js"></script>
<script type="text/javascript" src="jquery.loadscript.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#upload').uploadadapter({
fileTypeExts:'*.jpg;*.png',auto:false,showUploaded:true,baseurl:'.',//当前目录
multi:true,removeTimeout:9999999,uploadurl:'upload.php'
});
});
</script>
</head>
<body>
<input type="file" name="file" id="upload" />
</body>
</html>
? ? ? 截图： ? ? ? ie8下调用flash
? ? ?firefox、chrome下调用html5
? ? ? 略有差异，ie8下圆角没了。。。如果不喜欢这个样式呢，就请打开css文件自己修改吧。 ? ? ? 很简单的调用，可以看到在页面中使用的是uploadadapter，由它来决定调用哪个插件。俩个插件所需要的js文件和css文件都是异步引入的，此处用到一个小插件loadScript。参数没有写全，可以自己看源代码的注释~ ? ? ? uploadadapter中的调用情况是我需要的配置，你也可以随意修改。 四、相关文件注释 ? ? ? 在此把文件夹中的文件做一个简要介绍： ? ? ? /html5uploader ? html5上传插件，你也可以拿来单独使用 ? ? ? /uploadify3.2 ? ? ? ?flash上传插件，也可以拿来单独使用 ? ? ? /uploads ? ?存放上传的文件 ? ? ? /jquery.loadScript.js ? 用于异步引入脚本的小插件 ? ? ? /jquery.uploadadapter.js ? 适配器，用来判断客户端类型，动态调用上传插件 ? ? ? /upload.php ? ?后台处理程序，最基本的 五、上源码，注释很全哦 http://download.csdn.net/detail/never_say_goodbye/5090639 六、一个bug！！ 很重要的哦，我之前给疏漏了，在这里说一下，文件就不重新上传了 在jquery.html5uploader.js的158和164行，将$('.uploadify-progress')改为$('#'+file.index).fnd('.uploadify-progress')，否则上传多个文件会混淆。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
