PHP+jQuery+Ajax實現多圖片上傳介紹

本文中用到一個Ajax表單提交外掛：jqery.form.js，有高人修改了幾行程式碼並改名為：jquery.wallform.js，直接拿來用。

下面就來就來介紹一下這一款功能強大的外掛的使用,需要的朋友可以做一下參考.

在不重新整理頁面的前提下，使用PHP+jQuery+Ajax實現多圖片上傳的效果。使用者只需要點選選擇要上傳的圖片，然後圖片自動上傳到伺服器上並展示在頁面上,效果圖如下:

一.HTML程式碼:

在頁面上放置一個form表單，使用post提交到後臺php處理程式upload.php，注意enctype屬性設定要支援檔案上傳。#preview用來顯示上傳完畢後的圖片。關於css樣式設定本文不加說明，請參照下載包的原始碼.

[HTML] 純文字檢視 複製程式碼
<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
  <div id="up_status" style="display:none"><img src="loader.gif" alt="uploading"/></div>
  <div id="up_btn" class="btn"> <span>新增圖片</span>
    <input id="photoimg" type="file" name="photoimg">
  </div>
</form>
<p>最大100KB，支援jpg，gif，png格式。</p>
<div id="preview"></div>

二.jQuery程式碼:

本例項基於jQuery，因此必須在頁面中載入jquery庫以及jquery.wallform.js。

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.wallform.js"></script>

當點選按鈕“新增圖片”後，彈出選擇檔案對話方塊，選擇要上傳的圖片後，觸發change事件。

然後表單#imageform呼叫jquery.wallform.js的ajaxForm()方法，將表單資料提交給後臺PHP處理，並根據返回結果處理頁面元素的展示。如果上傳成功，圖片會一張張排列顯示在頁面上。關於ajaxForm()的使用可以參照本站文章：Ajax表單提交外掛jqery form。

[JavaScript] 純文字檢視 複製程式碼
$(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/目錄，注意該目錄要有寫許可權。

首先需要檢測是否為POST方式提交，然後判斷圖片格式、圖片大小是否符合要求，然後使用move_uploaded_file()上傳圖片，並將圖片重新命名，格式為：time().rand(100,999)。

[PHP] 純文字檢視 複製程式碼
$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 '請選擇要上傳的圖片'; 
    exit; 
  } 
  $ext = extend($name); 
  if(!in_array($ext,$extArr)){ 
    echo '圖片格式錯誤！'; 
    exit; 
  } 
  if($size>(100*1024)){ 
    echo '圖片大小不能超過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 '上傳出錯了！'; 
  } 
  exit; 
} 
//獲取檔案型別字尾 
function extend($file_name){ 
  $extend = pathinfo($file_name); 
  $extend = strtolower($extend["extension"]); 
  return $extend; 
}