php教程博客,php教程博客

作用：1、图片ajax提交 2、即时显示

插件地址：https://blueimp.github.io/jQuery-File-Upload/

实例地址：http://www.phpno.com/jQuery-File-Upload-master/demo.html

使用步骤：

1、页面引入特定的js(至少引入一下4个js)

2、布置form表单

Submit

3、js编写以及css样式控制

//图片上传

$("#fileupload").fileupload({

dataType: 'json',

add: function (e, data) {

var numItems = $('.files .images_zone').length;

if(numItems>=10){

alert('提交照片不能超过3张');

return false;

}

$('.up_progress .progress-bar').css('width','0px');

$('.up_progress').show();

$('.up_progress .progress-bar').html('Uploading...');

data.submit();

},

done: function (e, data) {

$('.up_progress').hide();

$('.upl').remove();

var d = data.result;

if(d.status==0){

alert("上传失败");

}else{

var imgshow = '

删除

';

jQuery('.files').append(imgshow);

}

},

progressall: function (e, data) {

console.log(data);

var progress = parseInt(data.loaded / data.total * 100, 10);

$('.up_progress .progress-bar').css('width',progress + '%');

}

});

//图片删除

$('.files').on({

mouseenter:function(){

$(this).find('a').show();

},

mouseleave:function(){

$(this).find('a').hide();

},

},'.images_zone');

$('.files').on('click','.images_zone a',function(){

$(this).parent().remove();

});

/* 图片展示样式 */

.images_zone{position:relative; width:120px;height:120px; overflow:hidden; float:left; margin:3px 5px 3px 0; background:#f0f0f0;border:5px solid #f0f0f0; }

.images_zone span{display:table-cell;text-align: center;vertical-align: middle;overflow: hidden;width: 120px;height: 120px;}

.images_zone span img{width:120px; vertical-align: middle;}

.images_zone a{text-align:center; position:absolute;bottom:0px;left:0px;background:rgba(255,255,255,0.5); display:block;width:100%; height:20px;line-height:20px; display:none; font-size:12px;}

/* 进度条样式 */

.up_progress{width: 300px;height: 13px;font-size: 10px;line-height: 14px;overflow: hidden;background: #e6e6e6;margin: 5px 0;display:none;}

.up_progress .progress-bar{height: 13px;background: #11ae6f;float: left;color: #fff;text-align: center;width:0%;}

4、程序端代码编写

header('Content-type: application/json');

if($_FILES["image"]["error"]!=0){

$result = array('status'=>0,'msg'=>'上传错误');

echo json_encode($result);exit();

}

if( !in_array($_FILES["image"]["type"], array('image/gif','image/jpeg','image/bmp')) ){

$result = array('status'=>0,'msg'=>'图片格式错误');

echo json_encode($result);exit();

}

if($_FILES["image"]["size"] > 2000000){//判断是否大于2M

$result = array('status'=>0,'msg'=>'图片大小超过限制');

echo json_encode($result);exit();

}

$filename = substr(md5(time()),0,10).mt_rand(1,10000);

$ext = pathinfo($_FILES["image"]["name"], PATHINFO_EXTENSION);

$localName = "./imgs/".$filename.'.'.$ext;

if ( move_uploaded_file($_FILES["image"]["tmp_name"], $localName) == true) {

$lurl = 'http://api.gongchang.com/jQuery-File-Upload-master/'.$localName;

$result = array('status'=>1,'msg'=>$lurl);

}else{

$result = array('status'=>0,'msg'=>'error');

}

echo json_encode($result);

?>

5、就此完成

注：事件监控需要使用jquery的on函数