一、前言
前些日子發了一篇文章，介紹了自己寫的一個html5文件上傳插件，鏈接：http://blog.csdn.net/never_say_goodbye/article/details/8598521 。在支持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')，否則上傳多個文件會混淆。