ajax上传图片

28 篇文章 0 订阅
<li><label>图片</label>
                    <div class="upload_img_content">
                        <form action="/Merch/Shop/Upload" 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>
                </li>
<li><label> </label><input name="" οnclick="doSumbit()" type="submit" class="btn" value="添加"/></li>

上传图片的js写法:

<script>
        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\" type=\"text\" style=\"width:166px;\" 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("只能上传五张照片");
		}
            });
            
            // 删除图片操作
            $(".imglist").delegate("li", "mouseover", function () {
                $(this).children("i.img_del").show();
            }).delegate("li", "mouseout", function () {
                $(this).children("i.img_del").hide();
            }).delegate("li i.img_del", "click", function () {
                $(this).parent().remove();
            });
        });
        </script>

PHP shop.Upload 方法

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"];
        Video::mkFolder(Video::uploadPath()."shop");
        $filename = Video::uploadPath()."shop/".$icon; //图片的路径
        if (!move_uploaded_file($file['tmp_name'], $filename)) {
            return 4;
        }
        return $icon;
    }

提交方法:

<script type="text/javascript">
            function doSumbit() {
                var name = $("#name").val();
                var desc = $("#desc").val();
                var gwList = $("#gwList").val();
                var url  = $("#url").val();
                var li = $(".imglist li");
                if (name == "") {
                    alert("账号名称不能为空");
                    return;
                }
                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);
                $.ajax({
                    type: "post",
                    data: {
                        name: name,
                        desc: desc,
                        gwList: gwList,
                        pic: imageList,
                        url: url
                    },
                    dataType: "json",
                    url: "<?php echo \Framework\Net\Url::canvas("Merch", "Shop.doAdd")?>",
                    success: function (data) {
                        alert(data["message"]);
                        window.location.href=data["location"];
                    },
                    error: function(){
                        alert("提交失败");
                    },
                });
            }
        </script>

doAdd方法:

public function doAdd() {
        $name = trim($this->request->get("name"));
        $desc = $this->request->get("desc");
        $gwList = $this->request->get("gwList");
        $pic = $this->request->get("pic");
        $url = $this->request->get("url");
        if ($name== "") {
            echo json_encode(array("status" => 0, "message" => "商铺名称不能为空", "location" => \Framework\Net\Url::canvas("Merch", "Shop.add")));
            return;
        }
        if ($url== "") {
            echo json_encode(array("status" => 0, "message" => "商铺地址不能为空", "location" => \Framework\Net\Url::canvas("Merch", "Shop.add")));
            return;
        }
        $sessionArray = Session::get();
        $businessId = $sessionArray["id"];
        $info = array(
            "businessId" => $businessId,
            "name" => $name,
            "desc" => $desc,
            "pic" => $pic,
            "url" => $url,
            "gwList" => $gwList,
            "created" => time()
        );
        Shop::add($info);
        echo json_encode(array("status" => 1, "message" => "添加商户成功", "location" => \Framework\Net\Url::canvas("Merch", "Shop.run")));
    }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值