PHP+jQuery+Ajax單（多）圖片上傳

近日寫的一個銷售管理系統中，需要用戶上傳產品的圖片，找了好多插件，用起來都挺麻煩的而且還不好改，最後找到一篇用php和ajax做圖片上傳的，感覺代碼挺簡單的而且改起來很容易，轉發到此處與各位分享一下：

我們在本文中用到一個Ajax表單提交插件：jqery.form.js，有高人修改了幾行代碼並改名爲：jquery.wallform.js，直接拿來用。

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

<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。
當點擊按鈕“添加圖片”後，彈出選擇文件對話框，選擇要上傳的圖片後，觸發change事件。然後表單#imageform調用jquery.wallform.js的ajaxForm()方法，將表單數據提交給後臺PHP處理，並根據返回結果處理頁面元素的展示。如果上傳成功，圖片會一張張排列顯示在頁面上。關於ajaxForm()的使用可以參照本站文章：Ajax表單提交插件jqery form。

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.wallform.js"></script> 
$(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)。

$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; 
} 

在項目實際中，我將php中輸出的內容（無論錯誤信息或者是最後的文件路徑）都返回到了原頁面，在每次上傳一張圖片時就將圖片路徑用js拼接在一起，並寫入保存在了一個hidden的input中（寫入直接用js獲取input的id值並$(“#id”).val（path)即可），在提交表單時連同所有信息提交過去，這樣就能根據php返回的信息判斷圖片是否上傳成功。
以上是多圖的上傳模式。

如果要變成單圖上傳，只要在每次上傳前清空input的值，然後再提交表單到後臺即可。

缺點
此插件有一點不好的地方就是當你上傳錯圖片重新上傳新的圖片時，原先的圖片仍會被上傳至服務器，存在錯誤冗餘的問題。改進方法可能是需要自己寫一個服務器小程序進行處理，具體依據項目而行。