Jquery圖片上傳組件，支持多文件上傳
http://www.jq22.com/jquery-info230
jQuery File Upload 是一個Jquery圖片上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預覽、列表顯示圖片大小，支持上傳進度條顯示；支持各種動態語言開發的服務器端。
jQuery File Upload有多個文件選擇，拖放上傳控件拖放支持，進度條，驗證和預覽圖像，音頻和視頻 。
支持跨域，分塊和可恢復的文件上傳和客戶端圖像大小調整。適用於任何服務器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持標准的HTML表單文件上傳。
http://www.jq22.com/yanshi230
多文件上傳也是一個個上傳的，關鍵是在選擇的時候讓他一次性選擇多個
<input type="file" multiple="" name="files[]">
======================================================
插件描述：jQuery File Upload 是一個Jquery圖片上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預覽、列表顯示圖片大小，支持上傳進度條顯示；支持各種動態語言開發的服務器端。
jQuery File Upload 是一個Jquery圖片上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預覽、列表顯示圖片大小，支持上傳進度條顯示；支持各種動態語言開發的服務器端。
jQuery File Upload有多個文件選擇，拖放上傳控件拖放支持，進度條，驗證和預覽圖像，音頻和視頻 。
支持跨域，分塊和可恢復的文件上傳和客戶端圖像大小調整。適用於任何服務器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持標准的HTML表單文件上傳。
產品特點
多文件上傳：
允許選擇多個文件一次，並將其上傳同時進行。
拖放支持：
可以從您的桌面或文件管理器中拖放他們在您的瀏覽器窗口中上傳文件。
上傳進度條：
顯示一個進度條顯示為單獨的文件和所有上傳組合上傳進度。
可取消上傳：
單個文件上傳可以取消來停止上傳進度。
可恢復上傳：
中止的上傳可以與瀏覽器支持的Blob API進行恢復。
分塊上傳：
大文件可以上傳較小的塊與瀏覽器支持的Blob的API 。
客戶端圖像大小調整：
圖像可以自動調整大小的客戶端與瀏覽器支持所需的JS API的。
預覽圖像，音頻和視頻：
圖像，音頻和視頻文件的預覽可以與瀏覽器支持所需的API上傳前顯示。
沒有瀏覽器插件（例如使用Adobe的Flash ）要求：
該實現是基於開放的標准，如HTML5和JavaScript的，不需要額外的瀏覽器插件。
優美的后備舊版的瀏覽器：
如果支持的話，使用內置頁框作為后備舊版瀏覽器通過的XMLHttpRequest上傳文件。
HTML文件上傳表單回退：
通過使用標准的HTML文件上傳表單的控件元素允許漸進增強。
跨站點的文件上傳：
支持上傳文件到不同的域與跨站點的XMLHttpRequest或iframe重定向。
多個插件實例：
允許使用在同一個網頁上的多個插件實例。
可定制和可擴展的：
提供了一個API來設置各個選項，並定義回調方法的各種載事件。
多重和文件內容流上傳：
文件可以被上傳為標准的“多部分/窗體的數據”或文件內容流（ HTTP PUT文件上傳） 。
兼容任何服務器端應用平台：
適用於任何服務器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持標准的HTML表單文件上傳。
用法
下載壓縮包，解壓到網站就可用（與demo）一樣（PHP環境）。
最小化安裝向導（適用於需要自己定義界面元素的童鞋）：
需要一個input元素：<input id="fileupload" type="file" name="file[]" multiple>
需要加載的js文件有:
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
代碼例子（摘自官方）：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
最小安裝如何顯示上傳進度條：
插件支持顯示每個文件的上傳進度(progress)顯示和所有文件的總體上傳進度(progressall)顯示：
$('#fileupload').fileupload({
/* ... */
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
需要一個<div>容器用來顯示進：
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
需要給進度條不同顏色顯示才行，可以通過CSS來設置：
.bar {
height: 18px;
background: green;
}
將要上傳的文件名顯示在一個元素節點上：
你可以經常要將上傳的文件顯示到特定的元素上，這個可以通過add回調函數來實現：
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<p/>').text('Uploading...').appendTo(document.body);
data.submit();
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});
如何通過點擊按鈕來開始上傳：
在上例基礎上，可以通過按鈕點擊事件來觸發上傳（上例是自動上傳）：
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<button/>').text('Upload')
.appendTo(document.body)
.click(function () {
$(this).replaceWith($('<p/>').text('Uploading...'));
data.submit();
});
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});