php 点击选择图片上传,jQuery+PHP实现点击input file按钮即时上传图片并显示

jQuery+PHP实现点击input file按钮即时上传图片并显示。

1、a标签点击触发input[type=file]  id="newpic" 的点击事件 $("#file").click() 弹出文件选择框；

2、input[type=file]设定好 onchange() 事件

3、主要JS函数function afterSelect(){

var files = document.getElementById("newpic").files;

if(files.length<1){ return false; }

var fd = new FormData();

fd.append("newpic", files[0]);

fd.append("order_id", order_id);//其他字段

$.ajax({

type: 'post',

url: 'uploadpic.php',

data: fd,

dataType:'json',

contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置

processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post)

success: function(res) {

if(res.flag){

location.reload();

}else{

alert(res.info);

}

},error:function(e){

alert('上传出错');

},

complete:function(XMLHttpRequest,textStatus){

//清空input file中已选择的文件，方便下次选择同一文件

var fileinput = document.getElementById("newpic");

if(fileinput.outerHTML){

fileinput.outerHTML=fileinput.outerHTML;

}else{

//FF

fileinput.value="";

}

},

})

}

4、uploadpic.php中的代码require_once('include/uploader.php');

$res = array(

'flag'=>false,

'url'=>'',//上传得到的新路径

'picid'=>'0',//picID

'info'=>'',

);

if(!isset($_POST['order_id'])){

$res['info'] = '参数错误';

echo json_encode($res); die();

}

$order_id = intval($_POST['order_id']);

$er = new uploader();

$arr = $er->check("newpic");

if(empty($arr[0])){

$res['info'] = $arr[1];

echo json_encode($res); die();

}

$arr = $er->upload("newpic");

if(empty($arr[0])){

$res['info'] = $arr[1];

}else{

$res['flag'] = true;

$res['url'] = $arr[1];

$res['info'] = "success";

}

echo json_encode($res); die();

5、uploader.php中的代码class uploader{

public function Check($name){

$rearr= array('0','校验失败');//flag,msg

$imageTypes = array('gif','jpg','jpeg','pjpeg','png');//图片文件类型

$imageSize  = 1024000;//图片大小限制1M

//校验数组

if(empty($_FILES[$name]) || $_FILES[$name]["error"] > 0){

$rearr[1]='图片上传失败';

return $rearr;

}

//校验文件类型

if($_FILES[$name]['type']==''){

$rearr[1]='文件类型不允许';

return $rearr;

}

$index = strripos($_FILES[$name]['type'],'/')+1;

$type = substr($_FILES[$name]['type'],$index);

if(!in_array($type,$imageTypes)){

$rearr[1]='文件类型不允许';

return $rearr;

}

//校验文件尺寸

if($_FILES[$name]['size']+3>$imageSize+3){

$rearr[1]='图片尺寸过大，请重新选择';

return $rearr;

}

$rearr[0]='1';

$rearr[1]='success';

return $rearr;

}

//执行图片上传(表单中的name属性,保存路径-相对首页路径)

public function upload($name,$savedir='uploads'){

$return_arr = array('0','');

$type = $_FILES[$name]["name"];

$index = strripos($type,'.');

$type = substr($type,$index);

$newname = date('YmdH',time()).rand(10000,99999).'_'.rand(10000,99999).$type;

$savedir = $savedir.'/image/'.date('Ym',time());

if(!is_dir($savedir)){

if(mkdir($savedir,0777,true)){

//创建目录成功

}else{

//创建目录失败

$return_arr[1]='创建目录失败';

return $return_arr;

}

}

$filename = $savedir.'/'.$newname;

if(move_uploaded_file($_FILES[$name]["tmp_name"],$filename)){

$return_arr[0]='1';

$return_arr[1]=$savedir.'/'.$newname;

}else{

//操作失败

$return_arr[1]='操作失败';

}

return $return_arr;

}

}