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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hql007/article/details/80338055
个人分类: 知识点
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭