轉自：http://www.sucaihuo.com/js/3.html
通過PHP+Ajax實現多圖片上傳的效果。用戶只需要點擊選擇要上傳的圖片，然後圖片自動上傳到服務器上並立即顯示在頁面上。
效果如下圖：
1、上傳選項
2、上傳後
3、後臺上傳完成的圖片
資源下載地址：http://download.csdn.net/detail/u014175572/9478108
源碼如下：
HTML
首先我們在頁面上放置個上傳按鈕，使用POST提交到ajax.php。#ul_pics 用來顯示上傳完畢後的圖片。關於按鈕、進度條、圖片垂直居中樣式不加說明，請參照下載包的源碼。
<a class="btn" id="btn">上傳圖片</a> 最大500KB，支持jpg，gif，png，ico格式。
<ul id="ul_pics" class="ul_pics clearfix"></ul>jQuery
接着，加載jQuery.js和plupload.full.min.js插件。
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/plupload.full.min.js"></script>http://download.csdn.net/detail/u014175572/9478113
<span style="font-size:24px;"><script type="text/javascript">
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,ico"
}
]
},
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 += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) { //上傳中，顯示進度條
var percent = file.percent;
$("#" + file.id).find('.bar').css({
"width": percent + "%"
});
$("#" + file.id).find(".percent").text(percent + "%");
},
FileUploaded: function(up, file, info) { //文件上傳成功的時候觸發
var data = eval("(" + info.response + ")");
$("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div><p>" + data.name + "</p>");
},
Error: function(up, err) { //上傳出錯的時候觸發
alert(err.message);
}
}
});
uploader.init();
</script></span>PHP
ajax.php處理圖片上傳，並將上傳好的圖片保存在uploads/目錄，注意該目錄是否有寫入權限。首先需要檢測是否爲POST方式提交，然後判斷圖片格式、圖片大小是否符合要求，然後使用move_uploaded_file()上傳圖片，並將圖片重命名爲 time().rand(100,999)。
<span style="font-size:24px;"><?php
$typeArr = array("jpg", "png", "gif","ico");
//允許上傳文件格式
$path = "uploads/";
//上傳路徑
//if (!file_exists($path)) {
// mkdir($path);
//}
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" => "上傳有誤，清檢查服務器配置！"));
}
}
?></span>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 |
