网站头像上传（前台Ajax+后台PHP）

前台代码 portrait_upload.php：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传头像</title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>
<body>
<p style="color:red;">只支持以下图片格式：
jpg, gif, png, jpeg;  上传照片请不要大于2M</p>
<form action="portrait_upload2.php" method="post" enctype="multipart/form-data">

<div style="display: none" id="first_img">
    <img id="xmTanImg" width="100px" />
</div>

<input type="file" name="Filedata" id="Filedata" onchange="showTheImg(this)"/>
<!--<button onclick="fileUpload()">上传</button>-->
    <button>提交</button>
</form>
<script>
    //选择图片，马上预览
    function showTheImg(obj) {
        $('#first_img').css("display",'block');
        var file = obj.files[0];
        console.log(file.path);
        $("#qrImg").val(new Date().getTime()+"_"+file.name);
        console.log("file.size = " + file.size);  //file.size 单位为byte
        var reader = new FileReader();
        //读取文件过程方法
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        };
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        };
        reader.onabort = function (e) {
            console.log("中断读取....");
        };
        reader.onerror = function (e) {
            console.log("读取异常....");
        };
        reader.onload = function (e) {
            console.log("成功读取....");
            var img = document.getElementById("xmTanImg");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        };
        reader.readAsDataURL(file);
    }


</script>

</html>

后台代码 portrait_upload2.php

<?php
require_once("include/db_info.inc.php");

require_once("include/memcache.php");
    include_once "include/pdo.php";
    $msg = array();
    //设置图片要上传保存到服务器的绝对路径
    $jal_file_path = "/JudgeOnline/portrait/";

    //$path = $_SERVER['DOCUMENT_ROOT'].'/Public/UserPicture/';
    $path = $_SERVER['DOCUMENT_ROOT'].$jal_file_path;

    //图片显示的路径
    $showPath = '';
    $key="";
    if(isset($_FILES['Filedata'])){
        //若上传错误，则弹出错误id
        if($_FILES['Filedata']['error'] > 0){
            $resultCode = 0;
            $resultMsg  = '错误代码：'.$_FILES['Filedata']['error'];
        } else if($_FILES['Filedata']['size'] > (2*1024*1024)){
            $resultCode = 1;
            $resultMsg  = '上传照片请不要大于2M';
        } else {
            $division = pathinfo($_FILES['Filedata']['name']);
            $extensionName = $division['extension'];  //获取文件扩展名
            //如果上传文件不是图片，则不保存
            if( !in_array($extensionName, array('jpg', 'gif', 'png', 'jpeg'))){
                $resultCode = 2;
                $resultMsg  = '错误：只可以上传图片格式！';
            } else {
                //对图片进行保存
                $pattern='1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLOMNOPQRSTUVWXYZ';
                for($i=0; $i<10; $i++)
                {
                    $key .= $pattern{mt_rand(0,35)};    //生成php随机数
                }
                $newFileName = sha1(date('Y-m-d',time()).$key).'.'.$extensionName;
                $savePath    = $path.$newFileName;  //图片的存储路径
                $showPath    = $jal_file_path.$newFileName;

                move_uploaded_file($_FILES['Filedata']['tmp_name'], $savePath);
                chmod($savePath,0777);

                if(!file_exists($savePath)){
                    $resultCode = 3;
                    $resultMsg  = '上传失败';
                } else {
                    //将图片路径添加到用户数据表中
                    $sql = "update users set portrait_path =? where user_id=?";
                    $user_id = $_SESSION[$OJ_NAME . '_' . 'user_id'];
                    $res=pdo_query($sql,$showPath,$user_id);
                    if($res){
                        $resultCode = 4;
                        $resultMsg  = '上传成功';

                        //这里需要将原有的图片删除
                        if(!empty($icon_url)){
                            unlink($_SERVER['DOCUMENT_ROOT'].$icon_url);
                        }
                        if(isset($_SESSION[$OJ_NAME . '_' . 'user_id'])){
                            $user_id = $_SESSION[$OJ_NAME . '_' . 'user_id'];

                            header("location:userinfo.php?user=$user_id");
                        }
                        else{

                            header("index.php");
                        }

                    } else {
                        $resultCode = 6;
                        $resultMsg  = '保存到数据库失败';

                        //这里需要将上传的图片删除掉
                        unlink($savePath);
                    }
                }
            }
        }
    } else {
        $resultCode = 5;
        $resultMsg  = '文件未上传';
    }

    echo json_encode(array(
        'codeNum' => $resultCode,
        'msg'     => $resultMsg,
        'path'    => $showPath,
    ));


?>

注意

form表单中一定要写上enctype=”multipart/form-data”，否则后端获取不到全局变量$_FILES[‘Filedata’]
input中 name=”Filedata” id=”Filedata”，name和id的值要相同，否则会出错

网站头像上传（前台Ajax+后台PHP）

前台代码 portrait_upload.php：

后台代码 portrait_upload2.php

注意

猜你喜欢