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 \Think\Upload();// 实例化上传类        $upload->maxSize = 2*1024*1024;        $upload->rootPath  = './Uploads/'; // 设置附件上传根目录        $upload->savePath  = 'Pc/headerimg/'; // 设置附件上传（子）目录        $info = $upload->uploadOne($file);        $infourl='./Uploads/'.$info['savepath'].$info['savename'];        $image = new \Think\Image();        $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,\Think\Image::IMAGE_THUMB_CENTER)->save($infourl);        }        exit(json_encode($info));    }