首頁 > web前端 > js教程 > 主體

PHP jQuery Ajax實現多重圖片上傳效果_jquery

WBOY
發布: 2016-05-16 16:09:30
原創
1425 人瀏覽過

今天我要跟大家分享的是在不刷新頁面的前提下,使用PHP jQuery Ajax實現多圖片上傳的效果。使用者只需要點擊選擇要上傳的圖片,然後圖片自動上傳到伺服器並展示在頁面上。

HTML

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

複製程式碼 程式碼如下:


   
   

        新增圖片
       
   


最大100KB,支援jpg,gif,png格式。



jQuery
本實例基於jQuery,因此必須在頁面中載入jquery函式庫以及jquery.wallform.js。

複製程式碼 程式碼如下:



當點擊按鈕「新增圖片」後,彈出選擇檔案對話框,選擇要上傳的圖片後,觸發change事件。然後表單#imageform呼叫jquery.wallform.js的ajaxForm()方法,將表單資料提交給後台PHP處理,並根據傳回結果處理頁面元素的展示。如果上傳成功,圖片會一張張排列顯示在頁面上。關於ajaxForm()的使用可以參考本站文章:Ajax表單提交插件jqery form。

複製程式碼 程式碼如下:

$(function(){
    $('#photoimg').die('click').live('change', function(){
        var status = $("#up_s​​tatus");
        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) 與 $_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 'PHP jQuery Ajax實現多重圖片上傳效果_jquery';
    }else{
        echo '上傳出錯了! ';
    }
    exit;
}
//取得檔案類型後綴
function extend($file_name){
    $extend = pathinfo($file_name);
    $extend = strtolower($extend["extension"]);
    return $extend;
}

當然,實際應用中,可以與資料庫以及使用者中心結合,將使用者上傳的圖片保存在資料表中,具體應用大家可以自行研究。

以上就是本文給大家分享的全部內容了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板