使用PHP上传图片

一、创建表单

<form action="upload.php" method="post" id="wrapper" enctype="multipart/form-data">
    <input type="file" id="fileUpload" name="mypic[]" multiple>
    <input type="submit" name="submit">
    <div id="image-holder">

    </div>
</form>

对于form表单中enctype属性解释

值	描述
application/x-www-form-urlencoded	发送前编码所有字符(默认）
multipart/form-data	不对字符编码。在使用包含文件上传控件时，必须使用该值。
text/plain	空格转换为"+"加号，但不对特殊字符编码

二、通过JavaScript创建image标签并预览需要上传的图片文件

<script src="jquery-3.1.1.js"></script>
<script>
    $(function () {
        $("#fileUpload").on("change",function () {
            var countFiles = $(this)[0].files.length;//需上传文件个数
            console.log(countFiles);
            var imgPath = $(this)[0].value;// 获取的是c://fakepath/+选中的文件的形式
            console.log(imgPath);//这个是处于安全性考虑的，比如文件路径会暴露你的用户名或者其他内容，
                                 //而通过fakepath直接代替了其中的路径名，保护隐私和安全。
            var extn = imgPath.substring(imgPath.lastIndexOf(".")+1).toLowerCase();// 拿到文件后缀名
            console.log(extn);
            var image_holder = $("#image-holder");
            image_holder.empty();
            if(extn == "gif" || extn == "png" || extn == "jpeg" || extn == "jpg"){
                if(typeof (FileReader) != "undefined"){
                    for (var i = 0; i < countFiles; i++) {
                        var reader = new FileReader();
                        reader.readAsDataURL($(this)[0].files[i]);
                        reader.onload = function (ev) {
                            console.log(ev);
                            $("<img/>",{
                                "src":ev.target.result,
                                "class":"thumb-image"
                            }).appendTo(image_holder)
                        }
                        image_holder.show();
                    }
                }else {
                    alert("FileReader 不支持！")
                }
            }else{
                alert("请选择图像文件")
            }
        })
    })
</script>

三、创建upload.php

准备工作：在php.ini文件中必须开启file_uploads = on，如果设置为off则不允许文件上传也就接收不到$_FILES的值。

header("content-type:text/html;charset=utf8");
$uploadPath = "uploads/";//index.html、upload.php和uploads文件夹在同一级目录下。
$files = $_FILES["mypic"];
var_dump($files);
for($i=0;$i<count($files["size"]);$i++){
    if($files["error"][$i]>0){
        $msg = "传入参数错误".$files['error'][$i];
        exit($msg);
    }else{
        $type = pathinfo($files["name"][$i]);
        var_dump($type); //$type["extension"]获取文件后缀名
        $files["name"][$i] = hash_file('md5',$files["tmp_name"][$i],false).".".$type["extension"];
        if(file_exists($uploadPath.$files["name"][$i])){
            $msg = $files["name"][$i]."文件已存在";
            exit("$msg");
        }else{
            if(move_uploaded_file($files["tmp_name"][$i],$uploadPath.$files["name"][$i])){

                $img_url = "http://localhost/PHP/".$uploadPath.$files["name"][$i];
            }else{
                exit("上传失败");
            }

        }
    }
}

猜你喜欢