* Html端 */
<div title="相册信息" class="tab2" >
<input type="file" id="file">
<div id="img_text">共<span class="img_total">0</span>张,还能上传<span class="img_limit">8</span>张</div>
<div id="img_content">
</div>
</div>
/**
* 图片上传
* swf : uploadify falsh插件
* uploader : 后端上传路径
* width : 上传按钮宽度
* height: 上传按钮高度
* fileTypeDesc : 文件类型
* fileTypeExts : 可以上传的图片后缀
* fileSizeLimit : 限制上传图片的大小
* overrideEvents : 覆盖系统提示错误
* onSelectError : 图片上传错误信息
* onUploadStart : 上传之前的方法
* onUploadSuccess : 上传成功后的回调函数 file:上传后的图片信息 data:上传后的后端输出的回调信息 response:上传成功返回true,失败返回false
*/
var img_total = 0; //共几张图片
var img_limit = 8; //还能上传几张图片
$("#file").uploadify({
swf:ThinkPHP['UPLOADIFY']+'/uploadify.swf',
uploader:ThinkPHP['UPLOADER'],
width:120,
height:35,
fileTypeDesc:'图片类型',
buttonCursor:'pointer',
buttonText:'上传图片',
fileTypeExts:'*.jpeg; *.jpg; *.gif; *.png;',
fileSizeLimit:'1MB',
overrideEvents:['onSelectError','onDialogClose','onSelect'],
onSelectError:function (file,errorCode,errorMsg) {
switch (errorCode){
case -110:
$.messager.alert('警告','上传图片超过1MB限制!','warning');
break;
}
},
onUploadStart:function () {
if(img_total == 8){ //图片上传到8张 停止上传
$("#file").uploadify('stop');
$("#file").uploadify('cancel');
$.messager.show({
title:'我的消息',
msg:'图片单次只能上传8张!',
timeout:5000,
showType:'slide'
});
}else{
//图片预加载
$("#img_content").append(
'<div id="img">' +
'<img class="images" src="__IMG__/loading.jpg" >' +
'<img id="close" src="__IMG__/close.png">' +
'</div>');
}
},
onUploadSuccess:function(file,data,response){
var img_datas = $.parseJSON(data);//接收PHP返回的JSON数据,转换成对象
$("#img_content").append( //每次添加一个图片 就在其后面添加一个隐藏表单
'<input type="hidden" name="thumb" value='+data+' >'
);
//替换预加载图片路径
var images = $("#img_content .images");
var images_len = $("#img_content .images").length;
var images_src = '__ROOT__/'+img_datas.file_180;
$(images[images_len-1]).attr('src',images_src).hide(); //预加载后 图片替换路径 先隐藏
setTimeout(function () { //50毫秒后淡入真实图片
$(images[images_len-1]).attr('src',images_src).fadeIn();
},50)
//点击图片显示关闭按钮
var img = $("#img_content #img");
var len = $("#img_content #img").length;
$(img[len-1]).hover(function () {
$(this).find('#close').show();
},function () {
$(this).find('#close').hide();
});
//点击删除图片
var close = $("#img_content #close");
var close_len = $("#img_content #close").length;
$(close[close_len-1]).click(function () {
//删除隐藏表单
$(this).parent().next('input[name="thumb"]').remove();
//删除图片
$(this).parent().remove();
//上传图片张数限制
img_total--;
img_limit++;
$(".img_total").text(img_total);
$(".img_limit").text(img_limit);
});
//上传图片张数限制
img_total++;
img_limit--;
$(".img_total").text(img_total);
$(".img_limit").text(img_limit);
},
});
/* 图片上传结束 */
//PHP端上传图片
public function upload(){
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 1048576 ;// 设置附件上传大小 1*1024*1024 == 1MB
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './'; // 设置附件上传根目录
$upload->savePath = 'Uploads/'; // 设置附件上传(子)目录
// 上传文件
$info = $upload->upload();
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功
foreach($info as $file){
$file_name = $file['savepath'].$file['savename'];
}
$image = new \Think\Image();
$image->open($file_name);
$save180_name = $file['savepath'].'180_'.$file['savename'];
$image->thumb(180, 180,\Think\Image::IMAGE_THUMB_CENTER)->save($save180_name);
$image->open($file_name);
$save550_name = $file['savepath'].'550_'.$file['savename'];
$image->thumb(550, 550,\Think\Image::IMAGE_THUMB_CENTER)->save($save550_name);
$img_datas = array(
'file_name'=>$file_name,
'file_180'=>$save180_name,
'file_550'=>$save550_name
);
$this->ajaxReturn($img_datas); //三张图格式转为json
}
}