快捷導(dǎo)航

PHP+jQuery+Ajax實(shí)現(xiàn)多圖片上傳效果

更新時(shí)間：2015年03月14日 16:56:08 投稿：hebedich

我們在本文中用到一個(gè)Ajax表單提交插件：jqery.form.js，有高人修改了幾行代碼并改名為：jquery.wallform.js，直接拿來用。下面我們就來看看這款神奇的jQuery插件吧。

今天我給大家分享的是在不刷新頁面的前提下，使用PHP+jQuery+Ajax實(shí)現(xiàn)多圖片上傳的效果。用戶只需要點(diǎn)擊選擇要上傳的圖片，然后圖片自動(dòng)上傳到服務(wù)器上并展示在頁面上。

HTML

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

復(fù)制代碼代碼如下:

<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
本實(shí)例基于jQuery，因此必須在頁面中載入jquery庫以及jquery.wallform.js。

復(fù)制代碼代碼如下:

<script type="text/javascript" src="jquery.min.js"></script> 

<script type="text/javascript" src="jquery.wallform.js"></script> 

當(dāng)點(diǎn)擊按鈕“添加圖片”后，彈出選擇文件對話框，選擇要上傳的圖片后，觸發(fā)change事件。然后表單#imageform調(diào)用jquery.wallform.js的ajaxForm()方法，將表單數(shù)據(jù)提交給后臺PHP處理，并根據(jù)返回結(jié)果處理頁面元素的展示。如果上傳成功，圖片會一張張排列顯示在頁面上。關(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)限。首先需要檢測是否為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 '請選擇要上傳的圖片'; 

        exit; 

    } 

    $ext = extend($name); 

    if(!in_array($ext,$extArr)){ 

        echo '圖片格式錯(cuò)誤！'; 

        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 '上傳出錯(cuò)了！'; 

    } 

    exit; 

} 

//獲取文件類型后綴 

function extend($file_name){ 

    $extend = pathinfo($file_name); 

    $extend = strtolower($extend["extension"]); 

    return $extend; 

}