我把一些用不到的HTML code 去除後，留下比較陽春的功能，在學習這個 plugin 時，會比較容易上手。
和 Basic Version 相比較，Essentail Version 的功能如下：
1、多檔案上傳
2、支援 Drag and Drop
3、
4、
5、
6、支援 PHP, Python, Ruby on Rails , Java, Node.js, Go ...等伺服器端語言
準備工作：
Basic Version 會用到的伺服器端(PHP)相關的檔案結構如下：js/ (請將下載下來的原始碼中，js 目錄下的所有檔案複製到這個目錄下)
files/ (檔案上傳後的存放目錄，請將其權限設為可讀寫)
UploadHandler.php (請參考前一篇的內容)
upload_process.php (請參考前一篇的內容)
Basic Version 會用到的 Client端 HTML 檔案(essential.html)內容如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>多檔案上傳範例 - 陽春款</title>
</head>
<body>
<div class="container">
<h1>多檔上傳範例 -- 陽春款</h1>
<h2 class="lead">Essential Version</h2>
<br>
<input id="fileupload" type="file" name="files[]" multiple>
<br>
<br>
<!-- 上傳成功後會在此區顯示檔名 -->
<div id="uploaded-files" class="uploaded-files"></div>
<br>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- 如果你已經使用了 jQuery UI, 就不用再導入 jquery.ui.widget.js -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
'use strict';
// 將 url 這個變數改成你的伺服器端處理程式
var url = 'upload_process.php';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#uploaded-files');
});
}
});
});
</script>
</body>
</html>
跟之前最大的不同處，是在於範例一是用表單將 file 的資料傳給處理程式(upload_process.php)，但是這個範例是利用 jQuery File Upload 這個 plugin ，將 file 這個表單元件的資料一個一個傳給處理程式(upload_process.php)，然後再利用其json格式的傳回值，將上傳完成的檔案名稱顯示在畫面上。
操作步驟：
1、請先用瀏覽器(例：Chrome)打開 essential.html，然後按下「選擇檔案」的按鈕；或是直接將檔案拖曳至「選擇檔案」的按鈕上。
2、拿 Win7 裏的範例圖片(Koala.jpg)來測試
3、就可以看到畫面上顯示出 Koala.jpg 的檔名。
相關文件：
jQuery plugin: jQuery-File-Upload 多檔案上傳(一)使用前的熱身參考資料：
1、jQuery File Upload Demo -- Basichttp://blueimp.github.io/jQuery-File-Upload/basic.html
1 則留言:
非常感謝你~~
張貼留言