头像文件上传方法一：from表单方法二：ajax-白红宇

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

阅读量：5871 次

发布时间：2019-06-19

本文共 3830 字，大约阅读时间需要 12 分钟。

方法一：from表单

html

设置form表单，内包含头像预览div，内包含上传文件input

设置iframe用来调用函数传参路径

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 "";                    }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

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