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));
    }