html5+JS+PHP 预览并异步上传图片的功能

Html部分

<div class="from-group clearfix from-group-padding">
					    	<label class="col-sm-1 label-right">微缩图 :</label>
					    	<div class="col-sm-2">
					    		<a href="javascript:;" id="uploadimg">
					    			<img src="/images/default-thumbnail.png"  width="180" style="" id="imgpre">
					    			<input type="file" id="imgFile" onchange="imgPreview(this);return false;"/>
					    			<input type="hidden" name="course_pic" value="" id="getpic">
					    		</a>
					    	</div>
					    	<div class="input-note">尺寸：640px × 363px</div>
</div>

CSS部分

/* 图片上传CSS */
#uploadimg{display:block; width:180px; height:180px;position:relative; overflow:hidden;}
#imgFile{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);cursor:pointer}

js部分

function imgPreview(fileDom){

	    	        //判断是否支持FileReader
			        if (window.FileReader) {
			            var reader = new FileReader();
			        	} else {
			            toastr.error('不支持FileReader API 请升级您的设备');
			        }
			        var file = fileDom.files[0];
			        var imageType = /^image\//;
			        //是否是图片
			        if (!imageType.test(file.type)) {
			        	toastr.error('请选择图片！');
			            return;
			        }
		            //读取完成
			        reader.onload = function(e) {
			            // //获取图片展示的dom
			            // var img = document.getElementById("imgpre");
			            // // 图片路径设置为读取的图片
			            //  img.src = e.target.result;
			            // ajax 上传图片  
			            $.post("/Course/uploadimg", {course_img: e.target.result}, function(ret) { 
			                if (ret.img!='') {
			                    toastr.success('图片上传成功!');  
			                    $('#imgpre').attr('src','/'+ret.img);
			                    $('#getpic').attr('value','/'+ret.img);
			                    alert(ret.img);
                				// $('#showimg').html('<img src="' + ret.img + '">'); 
                				// 返回给前台 图片地址 放到隐藏框中
			                } else {  
			                    toastr.error('图片上传错误!');
			                }
			            },'json');  
			        };
			        reader.readAsDataURL(file);
 }//imgPreview结束

php部分

public function uploadimg(){
			$pic = Request::param();
			//获取图片信息
			list($type,$file) = explode(',',$pic['course_img']);
			// 判断类型  
		    if(strstr($type,'image/jpeg')!=''){  
		        $ext = '.jpg';  
		    }elseif(strstr($type,'image/gif')!=''){  
		        $ext = '.gif';  
		    }elseif(strstr($type,'image/png')!=''){  
		        $ext = '.png';  
		    }
		    // 生成的文件名  
	    	$photo = md5(time()).$ext;
	    	$file_dir = 'uploads/images/'.Date('Ymd');
	    	//判断文件夹是否存在
	    	if (!is_dir($file_dir)) {
	    		mkdir($file_dir,755,true);
	    	}
	    	if(file_put_contents($file_dir.'/'.$photo,base64_decode($file), true)){ 
	    		$ret = ['img'=>$file_dir.'/'.$photo]; 
	    		//这里必须用echo返回json 用return jquery接收不到 
	    		echo json_encode($ret);  
	    	}
}