js实现图片的本地预览

    最近在学习JS的过程中，写了一个图片本地预览的小demo，遇到了浏览器处于安全设置，限制了获取文件在本地的绝对路径问题，已通过查找资料解决，现记录下来备忘。

    实现图片的预览，两步即可完成。首先，使用<input type="file" />来让用户选择图片；然后，通过JS获取文件路径，将之放入到<img>标签的src属性中。

    HTML代码部分：

<h2>图片预览</h2>
<img alt="previewImg" id="previewImg" src="images/preview.jpg" width="80" height="80">
<form>
	<input type="file" id="myfile" id="myfile" />
</form>

    但是，现在的浏览器限制了获取本地文件的绝对路径，需要通过方法变通。JS代码如下：

       

$(function(){
	$("#myfile").change(function(){
		var imgPath = getObjectURL(this.files[0]);
		$("#previewImg").attr({
			src:imgPath
		})
	});
	function getObjectURL(file) {  
	      var url = null ;   
	      if (window.createObjectURL!=undefined) {  
	        url = window.createObjectURL(file) ;  
	      } else if (window.URL!=undefined) {   
	        url = window.URL.createObjectURL(file) ;  
	      } else if (window.webkitURL!=undefined) {  
	        url = window.webkitURL.createObjectURL(file) ;  
	      }  
	      return url ;  
	}  
})