1、配合 jQuery 使用十分方便
2、功能強大
3、說明文件完整
作者很貼心的連伺服器端(Server-side)的程式碼都準備好了
使用前請先到 https://github.com/blueimp/jQuery-File-Upload ，按下右下角的「Download ZIP」來下載壓縮好的程式碼
準備工作
1、Server端(以 PHP 為例)
下載後，在 server/php/ 目錄下，有2個檔案是必須的UploadHandler.php -- 處理上傳的類別檔。
index.php -- 用來處理上傳的主要程式，也就是 Form action 的目標；在這裏先把它改名為 upload_process.php 以方便辨識。
將 UploadHandler.php 及 upload_process.php 複製到網頁的目錄下，然後我們看一下裏面的內容。
沒錯！不用懷疑！！ upload_process.php (就是原來的 server/php/index.php) 裏面的內容就只有
error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');
$upload_handler = new UploadHandler();
upload_process.php 程式預設會接受以 POST method 傳送來的檔案資料，然後以上傳檔名儲存在程式所在位置的 files 目錄下。
所以請先在程式所在目錄建立一個 files 目錄，並將其權限設為「可讀寫」
2、Client 端( HTML )
請先建立一個有檔案上傳表單的 HTML 文件，檔名為 upload_form.html，範例如下：<html> <head> <meta charset="utf-8"> </head> <body> <br><br> <form method='POST' action='upload_process.php' enctype='multipart/form-data'> <input type='file' name='files[]' multiple> <input type='submit' value='Submit'> </form> </body> </html>
操作步驟
1、請先用瀏覽器(例：Chrome)打開 upload_form.html，然後按下「選擇檔案」的按鈕。
2、拿 Win7 裏的範例圖片--無尾熊( Koala.jpg) 來測試上傳
3、選好後按下「Submit」按鈕
我這裏發生這個問題的原因是預設的上傳目錄(files)不存在或是無寫入權限；把目錄建立並設好權限就ok了。
Server 端傳回的格式是 json，這些資料在以後我們在設定更方便的 UI 時會用到，這裏就先參考一下就好。
參考資料
1、Demo 站http://blueimp.github.io/jQuery-File-Upload/
2、原始碼@GitHub
https://github.com/blueimp/jQuery-File-Upload
沒有留言:
張貼留言