最近在学习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 ;
}
})