php上传图片

html代码：

<div class="upload_img_content">
                            <form action="上传图片验证" id="form1" class="uploadimg" role="form" method="post" enctype="multipart/form-data" >
                                <input name="" type="button" class="btn"  id="upimage" value="上传图片" />
                                <input type="file" name="pic" id="upfile" class="btn btn-file" />
                            </form>
                            <ul class="imglist">

                            </ul>
                        </div>

css样式：

.upload_img_content{float:left;width:80%;}
form.uploadimg{position:relative; display:inline-block;}
.btn-file{
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}
/* img style */
.imglist{ margin-left:0; width:100%;overflow:inherit;}
.imglist li{
    width:168px;
    float:left;
    clear:none;
    position:relative;
    margin-right: 20px;
}
.imglist li img{
    width:168px;
    height: 126px;
}
.imglist li span{margin:0;}
.imglist li input{width: 167px;}
.imglist li .img_del{
    background:url("/static/admin/images/t03.png") no-repeat center center;
    background-size:24px;
    width:24px;
    height:24px;
    position:absolute;
    top:-12px;
    right:-12px;
    z-index:100;
    padding-left:0;
    display:none;
}

js代码：

function showResponse(data) {
        switch (data) {
            case "1":
            {
                alert("图片不存在");
                break;
            }
            case "2":
            {
                alert("图片文件过大");
                break;
            }
            case "3":
            {
                alert("图片格式不正确");
                break;
            }
            case "4":
            {
                alert("移动图片出错");
                break;
            }
            default:
            {
                var shopUrl = imageUrl + data;
                var append = "<li class=\"selected\"><span><img src=\"" + shopUrl + "\"><input id=\"imageTitle\" style=\"width:166px;\" type=\"text\" class=\"dfinput\" value=\"\"  placeholder=\"请输入图片名称(可为空)\"/></span><i class=\"img_del\"></i></li>";
                $(".imglist").append(append);
                break;
            }
        }
        ;
    }
    $(function () {
        $(".btn-file").change(function () {
            if ($(".imglist li").length < 5) {
                $(this).parent().ajaxSubmit({
                    success: function (data) {
                        showResponse(data);
                    },
                    error: function (msg) {
                        alert("error");
                    }
                });
            } else {
                alert("只能上传五张照片");
            }
        });

获取图片路径和文本内容

        var li = $(".imglist li");
        var imgArr = [];
        var leng = [];
        for (var i = 0; i < li.length; i++) {
            var src = li.eq(i).children().find("img").attr("src");
            imgArr.push({imgSrc: src.substring(src.lastIndexOf('/') + 1), imgTitle: li.eq(i).children().find("input").val()});
            leng[i] = imgArr;
            imgArr = [];
        }
        var imageList = JSON.stringify(leng);

php代码：

 public function Upload() {
        $uptypes = array('image/jpg', 'image/jpeg', 'image/png', 'image/pjpeg', 'image/gif', 'image/bmp', 'image/x-icon', 'image/x-png');
        $maxSize = 2000000;     //上传文件大小限制 
        $file = $_FILES["pic"];
        if (!is_uploaded_file($file['tmp_name'])) { //判断图片文件是否存在
            return 1;
        }
        if ($file['size'] > $maxSize) {  //判断图片大小是否大于$max_size
            return 2;
        }
        if (!in_array($file['type'], $uptypes)) {  //判断图片文件的格式
            return 3;
        }
        $info = pathinfo($file["name"]);
        $icon = date("YmdHis") . uniqid() . "." . $info["extension"];
        $filename = "xxxxxxx";
        if (!move_uploaded_file($file['tmp_name'], $filename)) {
            return 4;
        }
        return $icon;
    }

显示: