Ajax+PHP實現異步圖片上傳

時間 2019-12-12

標籤 ajax+php ajax php 實現異步圖片上傳欄目 Ajax 简体版

原文原文鏈接

1.htmljavascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ajax+PHP實現異步圖片上傳</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script src="js/jquery-1.10.2.min.js"></script>
        <style type="text/css">
        #feedback{
            height: 200px;
            text-align: center;
            height: 160px;
            border: 1px solid silver;
            border-radius: 3px;
        }
        #feedback img{
            margin:3px 10px;
            border: 1px solid silver;
            border-radius:3px;
            padding: 6px; 
            width: 35%;
            height: 85%;
        }
        #feedback p{
            font-family: "微軟雅黑";
            line-height: 120px;
            color: #ccc;
        }
        .file {
            position: relative;
            display: inline-block;
            border: 1px solid #1ab294;
            border-radius: 4px;
            padding: 8px 16px;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            color: #1ab294;
            }
            
            .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            }
            .box{
            margin-top: 10px;
            text-align: center;
            }
            .box a{
            margin-left: 10px;
            }
    </style>
</head>
<body> 
    <!-- 響應返回數據容器 -->
    <div id="feedback">
    </div>
        <div class="box">
            <a href="javascript:;" class="file">選擇圖片
                <input type="file" multiple="multiple" id="inputfile" name="" class="photo">
            </a>
            <a href="javascript:;" class="file close">從新選擇
                <input type="buttom" class="photo">
            </a>
        </div>
<script type="text/javascript">
$(document).ready(function(){
    //響應文件添加成功事件
    var feedback = $("#feedback");
    $("#inputfile").change(function(){
    if (feedback.children('img').length>1) {
        alert("最多隻能選擇兩張圖片");
        return false;
    }
        //建立FormData對象
        var data = new FormData();
        //爲FormData對象添加數據
        $.each($('#inputfile')[0].files, function(i, file) {
            data.append('upload_file'+i, file);
        });
        $(".loading").show();    //顯示加載圖片
        //發送數據
        $.ajax({
            url:'up.php', /*去過那個php文件*/
            type:'POST',  /*提交方式*/
            data:data,
            cache: false,
            contentType: false,        /*不可缺*/
            processData: false,         /*不可缺*/
            success:function(data){        
                data = $(data).html();        /*轉格式*/
                
                //第一個feedback數據直接append，其餘的用before第1個（ .eq(0).before() ）放至最前面。
                //data.replace(/&lt;/g,'<').replace(/&gt;/g,'>') 轉換html標籤，不然圖片沒法顯示。
                if($("#feedback").children('img').length == 0)
                {
                 $("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
                }
                else{
                    $("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
                } 
            },
            error:function(){
                alert('上傳出錯');
            }
        });
    });
    $(".close").on("click",function(){
        $("#feedback").empty();
    });
});
</script>
</body>
</html>

2.up.phpphp

<?php
    header('content-type:text/html charset:utf-8');
    $dir_base = "./files/";     //文件上傳根目錄
    //沒有成功上傳文件，報錯並退出。
    $output = "<textarea>";
    $index = 0;        //$_FILES 以文件name爲數組下標，不適用foreach($_FILES as $index=>$file)
    foreach($_FILES as $file){
        $upload_file_name = 'upload_file' . $index;        //對應index.html FomData中的文件命名
        $filename = $_FILES[$upload_file_name]['name'];
        $gb_filename = iconv('utf-8','gb2312',$filename);    //名字轉換成gb2312處理
        //文件不存在才上傳
        if(!file_exists($dir_base.$gb_filename)) {
            $isMoved = false;  //默認上傳失敗
            $MAXIMUM_FILESIZE = 1 * 1024 * 1024;     //文件大小限制    1M = 1 * 1024 * 1024 B;
            $rEFileTypes = "/^\.(jpg|jpeg|gif|png){1}$/i"; 
            if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE && 
                preg_match($rEFileTypes, strrchr($gb_filename, '.'))) {
                $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename);        //上傳文件
            }
        }else{
            $isMoved = true;    //已存在文件設置爲上傳成功
        }
        if($isMoved){
            //輸出圖片文件<img>標籤
            //注：在一些系統src可能須要urlencode處理，發現圖片沒法顯示，
            //請嘗試 urlencode($gb_filename) 或 urlencode($filename)，不行請查看HTML中顯示的src並酌情解決。
            $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>";
        }else {
            //上傳失敗則把error.jpg傳回給前端
            $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>";
        }
        $index++;
    }
    echo $output."</textarea>";
    
//End_php