今天介紹大家一款多圖檔上傳插件：http://www.plupload.com，通過PHP+Ajax實作多圖檔上傳的效果。使用者隻需要點選選擇要上傳的圖檔，然後圖檔自動上傳到伺服器上并立即顯示在頁面上。
HTML
首先我們在頁面上放置個上傳按鈕，使用POST送出到ajax.php。#ul_pics 用來顯示上傳完畢後的圖檔。關于按鈕、進度條、圖檔垂直居中樣式不加說明，請參照下載下傳包的源碼。
上傳圖檔 最大500KB，支援jpg，gif，png格式。
jQuery
接着，加載jQuery.js和plupload.full.min.js插件。
當點選按鈕“上傳圖檔”後，彈出選擇檔案對話框，按 “ctrl” 選擇多圖檔上傳。然後調用 uploader.start() 方法，開始上傳。上傳中間過程我們可以用 UploadProgress 方法來顯示檔案進度，最後通過 FileUploaded 來顯示對應的圖檔。通過浏覽器控制台，會發現上傳一張圖檔，會向背景ajax.php請求一次。
var uploader = new plupload.Uploader({ //建立執行個體的構造方法
runtimes: 'html5,flash,silverlight,html4',
//上傳插件初始化選用那種方式的優先級順序
browse_button: 'btn',
// 上傳按鈕
url: "ajax.php",
//遠端上傳位址
flash_swf_url: 'plupload/Moxie.swf',
//flash檔案位址
silverlight_xap_url: 'plupload/Moxie.xap',
//silverlight檔案位址
filters: {
max_file_size: '500kb',
//最大上傳檔案大小(格式100b, 10kb, 10mb, 1gb)
mime_types: [ //允許檔案上傳類型
{
title: "files",
extensions: "jpg,png,gif"
}]
},
multi_selection: true,
//true:ctrl多檔案上傳, false 單檔案上傳
init: {
FilesAdded: function(up, files) { //檔案上傳前
if ($("#ul_pics").children("li").length > 30) {
alert("您上傳的圖檔太多了！");
uploader.destroy();
} else {
var li = '';
plupload.each(files,
function(file) { //周遊檔案
li += "
0% ";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) { //上傳中，顯示進度條
$("#" + file.id).find('.bar').css({
"width": file.percent + "%"
}).find(".percent").text(file.percent + "%");
},
FileUploaded: function(up, file, info) { //檔案上傳成功的時候觸發
var data = JSON.parse(info.response);
$("#" + file.id).html("
" + data.name + "
");
},
Error: function(up, err) { //上傳出錯的時候觸發
alert(err.message);
}
}
});
uploader.init();
PHP
ajax.php處理圖檔上傳，并将上傳好的圖檔儲存在uploads/目錄，注意該目錄是否有寫入權限。首先需要檢測是否為POST方式送出，然後判斷圖檔格式、圖檔大小是否符合要求，然後使用move_uploaded_file()上傳圖檔，并将圖檔重命名為 time().rand(100,999)。
$typeArr = array("jpg", "png", "gif");//允許上傳檔案格式
$path = "uploads/";//上傳路徑
if (isset($_POST)) {
$name = $_FILES['file']['name'];
$size = $_FILES['file']['size'];
$name_tmp = $_FILES['file']['tmp_name'];
if (empty($name)) {
echo json_encode(array("error"=>"您還未選擇圖檔"));
exit;
}
$type = strtolower(substr(strrchr($name, '.'), 1)); //擷取檔案類型
if (!in_array($type, $typeArr)) {
echo json_encode(array("error"=>"清上傳jpg,png或gif類型的圖檔！"));
exit;
}
if ($size > (500 * 1024)) {
echo json_encode(array("error"=>"圖檔大小已超過500KB！"));
exit;
}
$pic_name = time() . rand(10000, 99999) . "." . $type;//圖檔名稱
$pic_url = $path . $pic_name;//上傳後圖檔路徑+名稱
if (move_uploaded_file($name_tmp, $pic_url)) { //臨時檔案轉移到目标檔案夾
echo json_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name));
} else {
echo json_encode(array("error"=>"上傳有誤，清檢查伺服器配置！"));
}
}
plupload參數設定
參數
描述
預設值
Browse_button
觸發浏覽檔案按鈕
–
Container
展現上傳檔案清單的容器
body
chunk_size
當上傳檔案大于伺服器接收端檔案大小限制的時候，可以分多次請求發給伺服器，如果不需要從設定中移出
–
file_data_name
設定上傳字段的名稱
檔案
filters
選擇檔案擴充名的過濾器,每個過濾規則中隻有title和ext兩項[{title:”, extensions:”}]
–
flash_swf_url
flash檔案位址
–
headers
自定義的插入http請求的鍵值對
–
max_file_size
最大上傳檔案大小(格式100b, 10kb, 10mb, 1gb)
–
multi_selection
布爾值，是否多檔案上傳
false
resize
修改圖檔屬性 resize: {width: 320, height: 240, quality: 90}
–
runtimes
上傳插件初始化選用那種方式的優先級順序，如果第一個初始化失敗就走第二個，依次類推
–
required_features
需要那些特性，才能初始化插件
–
url
上傳伺服器位址
–
unique_names
是否生成唯一的檔案名，避免與伺服器檔案重名
–
urlstream_upload
布爾值 如果是flash上傳應該用URLStream 代替FileReference.upload
false