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

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

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

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

<input type="file" accept="image/*" id="newpic" name="newpic" onchange="afterSelect();">

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;
    }
}