我們?cè)诒疚闹杏玫揭粋€(gè)Ajax表單提交插件:jqery.form.js,有高人修改了幾行代碼并改名為:jquery.wallform.js,直接拿來(lái)用。下面我們就來(lái)看看這款神奇的jQuery插件吧。
今天我給大家分享的是在不刷新頁(yè)面的前提下,使用PHP+jQuery+Ajax實(shí)現(xiàn)多圖片上傳的效果。用戶只需要點(diǎn)擊選擇要上傳的圖片,然后圖片自動(dòng)上傳到服務(wù)器上并展示在頁(yè)面上。

HTML
我們?cè)陧?yè)面上放置一個(gè)form表單,使用post提交到后臺(tái)php處理程序upload.php,注意enctype屬性設(shè)置要支持文件上傳。#preview用來(lái)顯示上傳完畢后的圖片。關(guān)于css樣式設(shè)置本文不加說(shuō)明,請(qǐng)參照下載包的源碼。
復(fù)制代碼代碼如下:
<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
<div id="up_status" style="display:none"><img src="loader.gif" style="border-left-color: rgb(0, 153, 204); border-left-width: 1px; border-left-style: solid; padding: 0px 3px; margin: 3px auto 0px; width: 640px; background-color: rgb(242, 246, 251); clear: both; border-top-color: rgb(0, 153, 204); border-top-width: 1px; border-top-style: solid; border-right-color: rgb(0, 153, 204); border-right-width: 1px; border-right-style: solid;"> 復(fù)制代碼代碼如下:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.wallform.js"></script>
當(dāng)點(diǎn)擊按鈕“添加圖片”后,彈出選擇文件對(duì)話框,選擇要上傳的圖片后,觸發(fā)change事件。然后表單#imageform調(diào)用jquery.wallform.js的ajaxForm()方法,將表單數(shù)據(jù)提交給后臺(tái)PHP處理,并根據(jù)返回結(jié)果處理頁(yè)面元素的展示。如果上傳成功,圖片會(huì)一張張排列顯示在頁(yè)面上。關(guān)于ajaxForm()的使用可以參照本站文章:Ajax表單提交插件jqery form。
復(fù)制代碼代碼如下:
$(function(){
$('#photoimg').die('click').live('change', function(){
var status = $("#up_status");
var btn = $("#up_btn");
$("#imageform").ajaxForm({
target: '#preview',
beforeSubmit:function(){
status.show();
btn.hide();
},
success:function(){
status.hide();
btn.show();
},
error:function(){
status.hide();
btn.show();
} }).submit();
});
});
PHP
upload.php處理圖片上傳,并將上傳好的圖片保存在uploads/目錄,注意該目錄要有寫權(quán)限。首先需要檢測(cè)是否為POST方式提交,然后判斷圖片格式、圖片大小是否符合要求,然后使用move_uploaded_file()上傳圖片,并將圖片重命名,格式為:time().rand(100,999)。
復(fù)制代碼代碼如下:
$path = "uploads/";
$extArr = array("jpg", "png", "gif");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(empty($name)){
echo '請(qǐng)選擇要上傳的圖片';
exit;
}
$ext = extend($name);
if(!in_array($ext,$extArr)){
echo '圖片格式錯(cuò)誤!';
exit;
}
if($size>(100*1024)){
echo '圖片大小不能超過(guò)100KB';
exit;
}
$image_name = time().rand(100,999).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$image_name)){
echo '<img src="'.$path.$image_name.'" class="preview">';
}else{
echo '上傳出錯(cuò)了!';
}
exit;
}
//獲取文件類型后綴
function extend($file_name){
$extend = pathinfo($file_name);
$extend = strtolower($extend["extension"]);
return $extend;
}
當(dāng)然,實(shí)際應(yīng)用中,可以與數(shù)據(jù)庫(kù)以及用戶中心結(jié)合,將用戶上傳的圖片保存在數(shù)據(jù)表中,具體應(yīng)用大家可以自行研究。
以上就是本文給大家分享的全部?jī)?nèi)容了,希望大家能夠喜歡。