方法一：from表單

html

設置form表單，內包含頭像預覽div，內包含上傳文件input

設置iframe用來調用函數傳參路徑

        <!--表單提交成功後不跳轉處理頁面，而是將處理數據返回給iframe框架，用target屬性，屬性值為框架的name-->
        <form id="form1" action="chuli.php" method="post" enctype="multipart/form-data" target="sc">
            <!--頭像顯示位置-->
            <
 
div id="show">
                <!--刪除了提交按鈕，設置當路徑改變時執行表單提交，腳本語句可以直接寫在函數後-->
                <!--文件上傳設為透明，充滿整個div，使得點擊頭像框時可以執行瀏覽圖片-->
                <input type="file" id="file" name="file"  onchange="$(‘#form1‘).submit();"/>
            </div>
        </form>
        
        <!--
 
框架-->
        <iframe id="sc" name="sc"></iframe>

js

    function showImage(path){
        $(‘#show‘).css(‘background-image‘,‘url(‘+path+‘)‘);
    }
    //onchange後面的調用函數
//    function aa(){
//        $(‘#form1‘).submit();
//    }

php

    //文件名
    $name = $_FILES[‘file‘][‘name‘];
    //文件類型
    $type
 
 = $_FILES[‘file‘][‘type‘];
    //臨時路徑
    $tmp_name = $_FILES[‘file‘][‘tmp_name‘];
    //錯誤代碼
    $error = $_FILES[‘file‘][‘error‘];
    //文件大小
    $size = $_FILES[‘file‘][‘size‘];
    //如果文件名不為空則向下判斷
    if(!empty($name)){
        //如果錯誤等於0 則沒有錯誤，往下判斷
        if($error == 0){
            //文件類型為圖片時
            if($type == ‘image/png‘){
                //文件大小小於100000b
                if($size <=100000){
                    //如果不存在文件夾upfile
                    if(!is_dir("./image/")){
                        //創建文件夾upfile
                        mkdir("./image/");
                    }
                    //定義時間戳
                    $time = time();
                    //文件路徑設置為
                    $path = "./image/".$time.$name;
                    //如果文件移動成功
                    if(move_uploaded_file($tmp_name,$path)){
                        //返回給頁面的數據
                        //因為iframe為頁面的子元素，所以.parent為頁面，.showImage為其中的函數，$path為傳參路徑
                        echo "<script>window.parent.showImage(‘{$path}‘)</script>";
                    }else{
                        echo‘上傳失敗‘;
                    }
                //否則則輸出文件過大
                }else{
                    echo‘文件過大‘;
                }
            //若不是圖片則輸出格式不對
            }else{
                echo‘文件格式不對‘;
            }
        //錯誤代號，輸出各種錯誤意思。
        }else{
            switch($error){
                case ‘1‘:
                    echo ‘上傳的文件超過了 php.ini 中 upload_max_filesize 選項限制的值‘;
                break;
                case ‘2‘:
                    echo ‘傳文件的大小超過了 HTML 表單中 MAX_FILE_SIZE 選項指定的值。‘;
                break;
                case ‘3‘:
                    echo ‘文件只有部分被上傳‘;
                break;
                case ‘4‘:
                    echo ‘沒有文件被上傳‘;
                break;
                
            }
        }
    //文件名為空，則輸出文件為空
    }else{
        echo ‘文件為空‘;
    }

方法二：ajax

html

        <!--頭像框，設置寬高，背景圖，背景大小100%-->
        <div id="showing">
            <!--上傳文件，設置寬高100%，透明-->
            <input type="file" id="file" name="file" onchange="upload()" />
        </div>
        <!--<input type="button" value="上傳" onclick="upload()" />-->

js

    function upload(){
        //拿到文件名
        var path = $(‘#file‘).val(); 
        //如果文件名中的換行空格等，為空則提示要選擇文件
        if($.trim(path) == ""){
            alert(‘請選擇要選擇的文件‘);
            return;
        }
        $.ajaxFileUpload({
            url:‘chuli.php‘,
            type:‘post‘,
            secureuri:false,//是否啟用安全提交，默認false
            fileElementId:‘file‘,//上傳文件的id，name屬性名
            dataType:‘text‘,
            data:{},
            success:function(data){//console.log(data);
                $(‘#showing‘).css(‘background-image‘,‘url(‘+data+‘)‘);
            }
        });
    }

php與上面相同，只是返回值只為文件路徑。

    $name = $_FILES[‘file‘][‘name‘];
    $type = $_FILES[‘file‘][‘type‘];
    $tmp_name = $_FILES[‘file‘][‘tmp_name‘];
    $error = $_FILES[‘file‘][‘error‘];
    $size = $_FILES[‘file‘][‘size‘];
    if(!empty($name)){
        if($error == 0){
            if($type == ‘image/png‘){
                if($size <=100000){
                    if(!is_dir("./image/")){
                        mkdir("./image/");
                    }
                    $time = time();
                    $path = "./image/".$time.$name;
                    if(move_uploaded_file($tmp_name,$path)){
                        echo $path;
                    }else{
                        echo‘上傳失敗‘;
                    }
                }
            }
        }
    }

trim() 函數移除字符串兩側的空白字符或其他預定義字符。

• "\0" - NULL
• "\t" - 制表符
• "\n" - 換行
• "\x0B" - 垂直制表符
• "\r" - 回車
• " " - 空格

頭像上傳 方法一：from表單 方法二：ajax