我覺得很棒：https://fex.baidu.com/webuploader/
這是一整個靜態頁面的實例：界面長這樣：
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="uploader" class="uploader">
<div class="btns">
<div id="filePicker" class="choose_file">選擇文件</div>
<button id="upload_btn" class="btn btn-default" style="display: none;">開始上傳</button>
</div>
<!--用來存放文件信息-->
<div>
<table class="info_table">
<thead>
<tr>
<th class="no_border">序號</th>
<th>文件名稱</th>
<th>文件大小</th>
<th>上傳進度</th>
<th>操作</th>
</tr>
</thead>
<tbody id="file_list" class="file_list">
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="webuploader.withoutimage.min.js"></script>
<script type="text/javascript">
$(function(){
var self = this;
this.uploader = null;
// 可能有pedding, ready, uploading, confirm, done.
this.state = 'ready',
this.$btn = $("#upload_btn");
// 插件註冊
this.creatUploader = function(){
// 實例化
self.uploader = WebUploader.create({
pick: {
id: '#filePicker',
multiple:true
},
dnd: '#file_list',
accept: {
title: 'File',
extensions: 'doc,docx'
},
// 同時上傳個數
threads: true,
// swf文件路徑
swf:'Uploader.swf',
// 去重
duplicate:true,
server: 'http://2betop.net/fileupload.php'
});
// 添加文件選擇按鈕
self.uploader.addButton({
id: '#btnContainer',
innerHTML: '選擇文件'
});
// 當一批文件添加進隊列以後觸發
self.uploader.on( 'filesQueued', function(file) {
$("#upload_btn").show();
self.createDom(file);
$(".webuploader-pick").html("繼續添加");
});
// 開始上傳
self.$btn.on('click', function() {
if($(this).html() == "開始上傳"){
self.uploader.upload();
$(this).html("暫停");
}else{
self.uploader.stop();
$(this).html("開始上傳");
}
});
// 文件上傳過程中創建進度條實時顯示。
self.uploader.on( 'uploadProgress', function( file, percentage ) {
var $tr = $( '#'+file.id ).find(".file_pro"),
$percent = $tr.find('.progress .progress-bar');
// 避免重複創建
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'<span class="percent">'+ percentage * 100 + '%' +'</span>'+
'</div>').appendTo($tr).find('.progress-bar');
}
// 隱藏文字 只顯示進度條和百分比
$tr.find('p.state').hide();
$percent.css( 'width', percentage * 100 + '%' );
});
// 上傳出錯
self.uploader.on('uploadError',function(file,reason){
var $tr = $( '#'+file.id ),
$delete = $tr.find(".delete"),
$percent = $tr.find('.file_pro .progress .progress-bar');
$percent.hide();
$delete.html("");
$tr.find('span.percent').hide();
$tr.find('p.state').show();
$tr.find('p.state').html("上傳失敗！");
$tr.find('p.state').css("color","#FB635D");
});
// 上傳成功
self.uploader.on('uploadSuccess',function(file,response){
var $tr = $( '#'+file.id ),
$delete = $tr.find(".delete"),
$percent = $tr.find('.file_pro .progress .progress-bar');
$percent.hide();
$delete.html("");
$tr.find('span.percent').hide();
$tr.find('p.state').show();
$tr.find('p.state').html("上傳成功！");
$tr.find('p.state').css("color","rgb(52, 200, 74)");
});
//當文件被移除隊列後觸發
self.uploader.on('fileDequeued',function(file){
self.removeFile(file);
});
};
// 當有文件添加進來時執行，負責view的創建
this.createDom = function(file){
var str;
for(var i=0;i<file.length;i++){
// 創建序號
var id = Number(file[i].id.replace(/[^0-9]+/g, ''))+1;
if(id<10){
id="0"+id;
}
str = '<tr id="'+file[i].id+'">'
+'<td class="list_id">' + id + '</td>'
+'<td class="file_name">' + file[i].name + '</td>'
+'<td class="file_size">'+self.getfilesize(file[i].size)+'</td>'
+'<td class="file_pro">'
+'<p class="state">等待上傳...</p>'
+'</td>'
+'<td class="delete" data-id="'+file[i].id+'">刪除</td>'
+'</tr>';
$("#file_list").append(str);
}
$(".delete").on("click",function(){
var id = $(this).attr('data-id');
self.uploader.removeFile(id,true);
})
};
self.removeFile = function(file){
$('#'+file.id).remove();
}
// 字節轉KB方法
this.getfilesize = function(size){
if (!size)
return "";
var num = 1024.00; //byte
if (size < num)
return size + "B";
if (size < Math.pow(num, 2))
return (size / num).toFixed(2) + "KB"; //kb
if (size < Math.pow(num, 3))
return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
if (size < Math.pow(num, 4))
return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
}
// 入口函數
this.init = function(){
this.creatUploader();
};
this.init();
});
</script>
</body>
</html>
CSS：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body{
background: rgb(212, 231, 248);
}
.uploader{
width: 90%;
margin-left: 5%;
color: #333;
}
.btns{
width: 100%;
background: #fff;
margin: 20px 0;
padding: 10px 0;
}
.info_table{
width: 100%;
text-align: center;
font-size: 13px;
margin: 20px 0;
}
.info_table th{
background-color: rgb(39, 128, 228);
border-left: 1px solid #fff;
padding: 18px 0px;
color: #FFF;
}
.info_table th.no_border{
border: none;
}
.info_table tr{
background: #fff;
padding: 5px 10px;
}
.info_table tr:nth-child(even) {
background: rgb(234, 243, 252);
}
.info_table td{
padding: 18px 0px;
border:1px solid rgb(221, 221, 221);
}
.info_table td.file_name{
text-align: left;
text-indent: 20px;
width: 36%;
}
.info_table td.file_pro{
text-align: left;
text-indent: 20px;
width: 36%;
}
.delete{
cursor: pointer;
color: #FB635D;
}
.progress-bar{
height: 25px;
background: #ccc;
border-radius: 4px;
}
.webuploader-container {
position: relative;
}
.webuploader-element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
position: relative;
display: inline-block;
cursor: pointer;
padding: 9px 12px;
color: rgb(52, 200, 74);
text-align: center;
border-radius: 3px;
font-size: 14px;
border:1px solid rgb(52, 200, 74);
background: #fff;
}
.choose_file{
display: inline-block;
margin: 0 20px;
}
.webuploader-pick-hover {
background: rgb(52, 200, 74);
color: #fff;
}
.webuploader-pick-disable {
opacity: 0.6;
pointer-events:none;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn-default {
background: rgb(52, 200, 74);
color: #fff;
}
webuploader.withoutimage.min.js下載地址：https://fex.baidu.com/webuploader/download.html