js实现图片的本地预览

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

    实现图片的预览,两步即可完成。首先,使用来让用户选择图片;然后,通过JS获取文件路径,将之放入到标签的src属性中。

    HTML代码部分:

图片预览

previewImg

    但是,现在的浏览器限制了获取本地文件的绝对路径,需要通过方法变通。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 ;  
	}  
})

你可能感兴趣的:(知识点)