tp 图片上传，是多图，不过写得很垃圾。

> 其实也不是我写的啦，是同事帮我写的，我记下来，下次就会了嘛。

    <div class="fill-list">
                        <label class="fill-tit">PC-产品图库：</label>
                        <input class="fill-ipt" type="button" title="添加一个图片" value = "+" onclick="addThumbsBox()" style = "width: 30px;" >
                        <input class="fill-ipt" type="button" title="删除最后一个图片" value = "-" onclick="delThumbBox()" style = "width: 30px;" >

    </div>
    <div class="fill-list" id="thumbBox" style="padding:10px; margin-left: 126px; border: 1px solid #1E9300;">
         <?php
            if($pic_array){
                foreach($pic_array as $k=>$v){
                    echo "
                        <div class="filePhoto" style=" margin-bottom: 10px;"><input type="hidden" name="pic_id" value="".$v["id"]."" height="70px">
                        <p class="fill-lable1">图集 750*270 </p>
                        <div class="fill-logo1"><img src="".$v["pic_img"].""></div>
                        <p class="btn-up del"><span>删除</span></p>
                        </div>
                    ";
                }
            }else{
                echo "
                    <div class="filePhoto" style=" margin-bottom: 10px;">
                        <p class="fill-lable1">图集 750*270 </p>
                        <input type="hidden" name="thumbs[]" id="thumb_0" value="" height="70px">
                        <div class="fill-logo1"><img id="thumb_show_0" src="/Public/common/images/photo.jpg"></div>
                        <p class="btn-up"><span>上传</span><input type="file" name="file"  id="thumbs_btn_0" onchange="upload("thumb_show_0","thumbs_btn_0","thumb_0")"></p>
                    </div>
                ";
            }
        ?>
   </div>

下面是css,样式嘛。

<style type="text/css">
    #thumbBox .filePhoto p.btn-up{ width: 136px; overflow: hidden; height: 25px; position:relative; border: 1px solid #647687; background-color:#979797; color: #FFF;}
    #thumbBox .filePhoto p.btn-up input{ opacity: 0; width: 136px;}
    #thumbBox .filePhoto p.btn-up span{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; text-align: center;}
    #thumbBox .filePhoto .fill-logo1{ width: 138px; height: 77px; overflow: hidden;}
    #thumbBox .filePhoto .fill-logo1 img{ width: 100%; height: auto;}
</style>

js代码

        <!--图集js-->
<script>
    function addThumbsBox(){
        var obj = $("#thumbBox");
        var idx = obj.find(".filePhoto").length;
        if(6 < idx) return;
        var htmlstr = "";
        htmlstr = "<div class="filePhoto"><p class="fill-lable1">图集 750*270 </p>" +
                "<input type="hidden" name="thumbs[]" id="thumb_"+idx+"" value="" height="70px">" +
                " <div class="fill-logo1"><img id="thumb_show_"+idx+"" src="/Public/common/images/photo.jpg" ></div>" +
                "<p class="btn-up"><span>上传</span><input name="file" type="file" id="thumbs_btn_"+idx+"" onchange="upload("thumb_show_"+idx+"","thumbs_btn_"+idx+"","thumb_"+idx+"")"></p></div>";
        obj.append(htmlstr);
    }
    function delThumbBox(){
        var obj = $("#thumbBox");
        if(1 == obj.find(".filePhoto").length){ return;}
        var idx = obj.find(".filePhoto").length-1;
        if(0 < obj.find(".filePhoto").eq(idx).find("input[name=pic_id]").length){
            return false;
        }
        obj.find(".filePhoto").eq(idx).remove();
    }
    $("#thumbBox .filePhoto p.del").on("click",function(){
        var obj = $(this).parent();
        var id = obj.find("input[name=pic_id]").val();
        $.post("{:U("Pro/ajax_del_pic")}",
                {
                    id:id
                },
                function(data){
                    if(data == 2){
                        alert("删除失败，所选活动中有正在进行的，请重新选择");
                        setTimeout("location.reload()",100);
                    }else{
                        alert("删除成功");
                        obj.remove();
                    }
                });
    });
</script>

上面的html代码中用到的upload函数，js代码如下：

/*
 * replaceUrl 反馈上传的图片到页面上
 * fileElementId 定位需要上传的文件
 * past hidden 中的url
 * */

 function upload(replaceUrl,fileElementId,past){
    $.ajaxFileUpload
    (
        {
            url:"/index.php?s=/Pc/Centerall/upload1.html", //用于文件上传的服务器端请求地址
            secureuri: false, //一般设置为false
            fileElementId: fileElementId, //文件上传空间的id属性  <input type="file" id="file" name="file" />
            dataType: "HTML", //返回值类型 一般设置为json
            success: function (data, status)  //服务器成功响应处理函数
            {
                data = $.parseJSON(data);
                $path = "./Uploads/"+data.savepath+data.savename;
                $("#"+replaceUrl).attr("src",$path);
                $pastPath = $("#"+past).val();
                if($pastPath != ""){
                    //删掉之前的照片
                    delImage($pastPath);
                }
                $("#"+past).val($path);
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
                alert(e);
            }
        }
    )
}

function delImage(path){

    $.post("/index.php?s=/Pc/Base/delImage.html",{
        path : path
    }, function(data, textStatus) {});

}

controller的代码：

/*图片上传*/
    public function upload1(){
        $file = $_FILES["file"];
        $upload = new ThinkUpload();// 实例化上传类
        $upload->maxSize = 2*1024*1024;
        $upload->rootPath  = "./Uploads/"; // 设置附件上传根目录
        $upload->savePath  = "Pc/headerimg/"; // 设置附件上传（子）目录
        $info = $upload->uploadOne($file);
        $infourl="./Uploads/".$info["savepath"].$info["savename"];
        $image = new ThinkImage();
        $image->open($infourl);//将图片裁剪为400x400并保存为corp.jpg
        $width = $image->width(); // 返回图片的宽度
        $height = $image->height(); // 返回图片的高度
        $iw = $ih = 440;
        if($iw>$width){
            $iw = $width;
        }
        if($ih>$height){
            $ih = $height;
        }
        if($width>440 || $height>440){
            $image->thumb($iw, $ih,ThinkImage::IMAGE_THUMB_CENTER)->save($infourl);
        }
        exit(json_encode($info));
    }