> 其实也不是我写的啦,是同事帮我写的,我记下来,下次就会了嘛。
<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));
}