首先，爲什麼要寫這個插件呢？分析下現在大家用的比較多的上傳插件，大多是flash版本的，事實上我在前段時間一直用的是一個叫做uploadify的插件，官網http://www.uploadify.com.其官網提供了兩個版本，flash的，免費，html5的，收費。其flash版本的做的挺不錯，很多可以配置的參數，但是用flash的缺點也是很明顯的：1.加載時間長；2.不支持flash的設備（ipad）不能使用。關於這個html5版本的，這裏必須要鄙視一下，竟然要收費！太不地道了。而這個正是我寫這個插件的動力：做一個免費的插件，而且要跟你的功能一模一樣！於是，照着官方的api，開始動手了。。。uploadify,我要斷你財路了
html5標準對file控件做了很多擴展，包括可以在客戶端讀取文件信息等，可參考http://www.w3.org/TR/file-upload/。另外一個就是關於xmlHttpRequest對象，也做了新的擴展，可以實時反饋上傳文件的進度。可參考http://www.w3.org/TR/XMLHttpRequest/。利用這些新特性，做一個上傳插件就輕而易舉了。搜一下網上關於html5上傳的文章，不少，有些是簡單的一些介紹，有些是做出了插件，但是功能不太多。在此必須提一下@張鑫旭（http://www.zhangxinxu.com）的一篇文章，給了我很大幫助，事實上，我就是在他所寫的核心文件基礎上做的，所以ZXXFILE這個名字也給留着沒改。
二、先拉出來遛遛
是騾子是馬，先拉出來看看吧。先上截圖：
這個騾子不錯吧。插件有以下特性：
1.支持多文件上傳
2.帶進度條
3.可以顯示文件名稱
4.可以實時顯示已上傳的大小
5.可以從隊列中刪除
6.各元素的樣式都可以自己控制
此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>
<link rel="stylesheet" type="text/css" href="html5uploader.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.html5uploader.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#upload').html5uploader({
auto:false,
multi:true,
removeTimeout:9999999,
url:'upload.php',
onUploadStart:function(){
alert('開始上傳');
},
onInit:function(){
alert('初始化');
},
onUploadComplete:function(){
alert('上傳完成');
}
});
});
</script>
</head>
<body>
<div id="upload"></div>
</body>
</html>
三、插件的使用
參加demo頁面就可以啦！
四、關於配置參數
上面說了，這個插件是照着uploadify的api文檔寫的，那麼，我就省了寫文檔啦，哈哈。各參數如何配置，參看他官方的文檔就可以了。等於我這個是山寨產品，免費使用。
下載頁面：http://download.csdn.net/detail/never_say_goodbye/5077796