0628PHP练习：上传图片实时预览（ajax表单提交）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../bootstrap/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="ajaxfileupload.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        #yulan{
            width: 300px;
            height: 200px;
            background-size: 100% 100%;
            background-image: url(shangchuan/05-370-230.jpg);
        }
        #upfile{
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="yulan">
        <!--name和id要一样，改变图片时运行tijiao()函数-->
        <input type="file" id="upfile" name="upfile" value="" onchange="tijiao()"/>
    </div>
</body>
</html>
<script type="text/javascript">
    function tijiao(){
        $.ajaxFileUpload({
//            跳转到处理页面
            url:"wjscajaxchuli.php",
            type:"post",
            secureuri:false,
//            上传input的name和id
            fileElementId:"upfile",
            dataType:"text",
            data:{},
            success:function(lujing){
                $("#yulan").css("background-image","url("+lujing+")");
            }
        })
    }
</script>

<?php
//    var_dump($_FILES['upfile']);
    $name = $_FILES['upfile']['name'];
    $type = $_FILES['upfile']['type'];
    $tmp_name = $_FILES['upfile']['tmp_name'];
    $error = $_FILES['upfile']['error'];
    $size = $_FILES['upfile']['size'];
//        判断是否选择文件=====================================================================
        if(!empty($name)){
//            判断文件格式是否正确==============================================================
            if($type == "image/jpeg"){
//                判断文件大小是否符合要求======================================================
                if($size <= 1024000){
//                    判断文件是否存在错误====================================================
                    if($error == 0){
//                        查找文件存放位置路径是否存在=============================================
                        if(!is_dir("./shangchuan/")){
//                            没有找到路径则先创造路径======================================
                            mkdir("./shangchuan/");
                        }
//                        获取时间戳====================================================
                        $time = time();
//                        拼接保存地址：路径+文件
//                        例：C:/yingyongchengxu/wamp/bin/mysql/mysql5.6.17/bin/mysql.exe
                        $xinlujing = "./shangchuan/".$time.$name;
//                        如果路径中有中文字符需要先转换成UTF-8格式
                         $xinlujingzhuanhuan = iconv("UTF-8","gb2312",$xinlujing);
//                         把转换后的路径保存
                        if(move_uploaded_file($tmp_name,$xinlujingzhuanhuan)){
//                            把修改之前的路径传回
                            echo $xinlujing;
                        }else{
                            echo "上传失败";
                        }
                    }else{
                        echo "上传错误";
//                        假设文件上传字段的名称img，则：
//                        $_FILES['img']['error']有以下几种类型
//                        1、UPLOAD_ERR_OK
//                        其值为 0，没有错误发生，文件上传成功。
//                        2、UPLOAD_ERR_INI_SIZE
//                        其值为 1，上传的文件超过了 php.ini 中 upload_max_filesize选项限制的值。
//                        3、UPLOAD_ERR_FORM_SIZE
//                        其值为 2，上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值。
//                        4、UPLOAD_ERR_PARTIAL
//                        其值为 3，文件只有部分被上传。
//                        5、UPLOAD_ERR_NO_FILE
//                        其值为 4，没有文件被上传。
//                        6、UPLOAD_ERR_NO_TMP_DIR
//                        其值为 6，找不到临时文件夹。PHP 4.3.10 和 PHP 5.0.3 引进。
//                        7、UPLOAD_ERR_CANT_WRITE
//                        其值为 7，文件写入失败。PHP 5.1.0 引进。
                    }
                }else{
                    echo "文件不能超过1M";
                }
            }else{
                echo "文件格式错误";
            }
        }else{
            echo "请选择文件";
        }
?>

0628PHP练习：上传图片实时预览（ajax表单提交）

猜你喜欢