簡介
記得在前面PHP上傳檔案範例文章中，我們已經了解HTML form的檔案上傳的處理方式。在這篇文章我想要向大家介紹jQuery檔案上傳功能(jQuery Upload)，它是一個非常簡單、美觀、容易上手使用的JavaScript的函數庫，可以有效的提升網頁開發設計的速度和效率。
jQuery上傳頁面
首先，在head插入一個css和兩個js檔案，
- uploadfile.min.css 負責處理用戶端上傳畫面的UI呈現
- jquery.min.js 它是jQuery核心的函數庫
- jquery.uploadfile.min.js 負責處理檔案上傳的函數庫
再來於body增加一個id='fileuploader'的div標籤，最後於head加入初始化jQuery插件的腳本代碼<script> $(document).ready(... </script>負責呼叫位於Server端的檔案處理邏輯與將回傳結果顯示在畫面上。
完整的index.html程式碼如下：
<html> <head> <title>jQuery Upload Demo.</title> <link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script> <script> $(document).ready(function() { $("#fileuploader").uploadFile({ url:"upload.php", fileName:"myfile" }); }); </script> </head> <body> <div id="fileuploader">Upload</div> </body> </html>
檔案處理邏輯
在目前的位置建立uploads目錄，用來存放上傳到伺服器的檔案，接著需要判斷是單一檔案或是多個檔案上傳，分別指派不同的程式邏輯處理。
完整的upload.php程式碼如下：
<?php $output_dir = "uploads/"; if(isset($_FILES["myfile"])) { $ret = array(); //判斷是單一或多個檔案上傳 if(!is_array($_FILES["myfile"]["name"])) //單一檔案 { $fileName = $_FILES["myfile"]["name"]; move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName); $ret[]= $fileName; } else //多個檔案 { $fileCount = count($_FILES["myfile"]["name"]); for($i=0; $i < $fileCount; $i++) { $fileName = $_FILES["myfile"]["name"][$i]; move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName); $ret[]= $fileName; } } echo json_encode($ret); } ?>
輸出畫面
結論
由於過去一直都有在使用jQuery Upload來開發上傳檔案的程式，因為它是透過AJAX(Asynchronous JavaScript and XML)的方式來處理上傳檔案的資料串流，所以使用者可以依据其特性客製出各式各樣華麗的jQuery Upload使用者介面(UI;User Interface)。
版主你好!
回覆刪除請問一下,上述的code不需要更改就要可以使用了嗎?(因為我現在還是不能上傳,想問一下是不是環境不對)