头像上传 方法一：from表单 方法二：ajax

Posted 2020-11-21 ?SSs

方法一：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() 函数移除字符串两侧的空白字符或其他预定义字符。

• "" - NULL
• " " - 制表符
• " " - 换行
• "x0B" - 垂直制表符
• " " - 回车
• " " - 空格