[JavaScript]上传单张图片并预览

上传单张图片并预览（来自本菜鸡的记录。。。）

如图：点击图片按钮，选择图片后，图片按钮变成自己选择的那张
js:

<script type="text/javascript">
		 $(function(){
			 $("#image").click(function(){
				 $("#file").click();
			 }); 
			 
			 $("#file").on("change",function(){
				 
				 function getObjectURL(file) {  
			 		 var url = null;   
			 		 if (window.createObjectURL!=undefined) {  
			 		  url = window.createObjectURL(file) ;  
			 		 } else if (window.URL!=undefined) { // mozilla(firefox)  
			 		  url = window.URL.createObjectURL(file) ;  
			 		 } else if (window.webkitURL!=undefined) { // webkit or chrome  
			 		  url = window.webkitURL.createObjectURL(file) ;  
			 		 }  
			 		 return url;  
		 		  }  
 
				 var file =document.getElementById("file");
				 	var src= getObjectURL(file.files[0]) ;//获取文件信息 			 
					//获取到input的value，里面是文件的路径
					var filePath =file.value; 
				 	fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
				 	// 检查是否是图片
					if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
					  alert("上传错误,文件格式必须为：png/jpg/jpeg!");		 
					}else{ 
						$("#image").attr('src',src);
					} 
			 });		 
		 });

html:

 <tr>
	<td><label>会场图片:</label></td>
	<td colspan="3">
	         <img src="images/addimage.jpg" id="image" width="30px" height="30px" >
	         <input type="file" id="file"  multiple="multiple" name="activityImage" style="display: none;">		                         
	</td>
 </tr>

效果：