$(function(){
var bar = $('.bar');
var percent = $('.percent');
var showimg = $('#showimg');
var progress = $(".progress");
var files = $(".files");
var btn = $(".btnn span");
var webpic = $("#web_pic");
var d_url = __JSCONTROL__+'/del_img';
var m_url = __JSCONTROL__+'/uploads';
var img_url = __JSIMGPATH__;
$("#fileupload").wrap("<form id='myupload' action= " +m_url+ " method='post' enctype='multipart/form-data'></form>");
$("#fileupload").change(function(){ //选择文件
$("#myupload").ajaxSubmit({
dataType: 'json', //数据格式为json
beforeSend: function() { //开始上传
showimg.empty(); //清空显示的图片
progress.show(); //显示进度条
var percentVal = '0%'; //开始进度为0%
bar.width(percentVal); //进度条的宽度
percent.html(percentVal); //显示进度为0%
btn.html("上传中..."); //上传按钮显示上传中
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%'; //获得进度
bar.width(percentVal); //上传进度条宽度变宽
percent.html(percentVal); //显示上传进度百分比
},
success: function(data) { //成功
if(data.status == 1){
//获得后台返回的json数据，显示文件名，大小，以及删除按钮
files.html("<b>"+data.picname+"("+data.picsize+"k)</b><span class='delimg' rel='"+data.picname+"'>删除</span>");
//显示上传后的图片
var img = img_url+data.picname;
showimg.html("<img src='"+img+"'>");
btn.html("添加附件"); //上传按钮还原
webpic.val(data.picname);
bar.width('100%');
}else{
btn.html("上传失败");
bar.width('0');
files.html(data.msgs); //返回失败信息
}
},
// error:function(xhr){ //上传失败
// btn.html("上传失败");
// bar.width('0');
// files.html(xhr.responseText); //返回失败信息
// }
});
});
$(".delimg").live('click',function(){
var pic = $(this).attr("rel");
$.ajax({
url: d_url,
type: 'POST',
data: 'picname=' + pic,
dataType:'json',
success: function(res){
if(res==1){
files.html("删除成功.");
showimg.empty();
progress.hide();
webpic.val('');
files.html("");
}else{
alert(msg);
}
}
});
});
});2.HTML<tr>
<th>网站截图：</th>
<td>
<div class="btnn">
<span>添加附件</span>
<input id="fileupload" type="file" name="mypic">
</div>
<div class="progress">
<span class="bar"></span>
<span class="percent">0%</span >
</div>
</td>
</tr>
<tr>
<th></th>
<td>
<div class="files"></div>
<div id="showimg"></div>
</td>
</tr>3.控制器代码： public function uploads(){
if(!IS_AJAX)
E('非法请求！');
$up = new \Think\Upload();
$up->maxSize = 3292200 ;// 设置附件上传大小
$up->exts = array('jpg','gif','png','jpeg');// 设置附件上传类型
$up->rootPath = './uploads/'; //保存根路径
$up->savePath = 'dir/images/'; // 设置附件上传目录
$up->autoSub = false;
$up->saveName = date('YmdHis',time()).'_'.rand(100,999);
$info =$up->uploadOne($_FILES['mypic']);
if(!$info) { // 上传错误,提示错误信息
$result['status'] = 0;
$result['msgs'] = $up->getError();
$this->ajaxReturn($result);
}else{ // 上传成功
$size = round($info['size']/1024,1);
$result['status'] = 1;
$result['picname'] = $info['savename'];
$result['picpath'] = $info['savepath'];
$result['picsize'] = $size;
$this->thumb_img($info['savename']);
$this->ajaxReturn($result);
}
}
/**
*删除图片，同时删除略缩图
*/
public function del_img(){
if(!IS_AJAX)
E('非法请求！');
$filename = $_POST['picname'];
if(!empty($filename)){
unlink('./uploads/dir/images/'.$filename);
unlink('./uploads/dir/thumbs/'.$filename);
echo '1';
}else{
echo '删除失败.';
}
}
/**
*生成略缩图
*/
public function thumb_img($imgname){
$img_path = './uploads/dir/images/'.$imgname;
$thm_path = './uploads/dir/thumbs/'.$imgname;
$img = new \Think\Image();
$img->open($img_path);
$img->thumb(150, 150)->save($thm_path);
}CSS代码就不贴了。现在这个代码在火狐下运行很好，换到IE9下却大跌眼镜，没有任何反应。求大家帮助。 最佳答案
