您的位置：首页 > Web前端 > HTML5

flash + html5 实现浏览器兼容的文件上传方案

2013-02-26 21:17 731 查看
一、前言

前些日子发了一篇文章，介绍了自己写的一个html5文件上传插件，链接：/article/8896996.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')，否则上传多个文件会混淆。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航