图片预览js代码在谷歌浏览器下异常

JavaScript012

图片预览js代码在谷歌浏览器下异常,第1张

现在的高版本浏览器都不允许访问本地文件，你能看到的原因是你没有发布出去，你是直接打开这个文件的，本地html访问本地文件是可以的，但是远程html访问本地文件就不行。

如果你以域名（如：localhost/xxx.html或者127.0.0.1/xxx.html）来访问你就会发现你根本无法看到。

最好用插件，去layer官网有专门的点击图片，弹出浏览还支持多个图片。

先去官网下载layer包，你的网页引用layer的js文件。

地址：网页链接 点击相册层

然后js代码：

//调用示例

layer.ready(function(){ //为了layer.ext.js加载完毕再执行

var ps=$("#psize").val()

layer.photos({

photos: '#layer-photos-demo'

,shift: ps //0-6的选择，指定弹出图片动画类型，默认随机

})

})

html代码：

<div id="layer-photos-demo" class="layer-photos-demo" >

<img layer-pid="图片id，可以不写" layer-src="缩略图片地址" src="图片地址" alt="" style="height: 140pxwidth: 120pxborder:1px solid #bbb">

</div>

<form action="" method="post" enctype="multipart/form-data" name="form1">

<img src=" " name="image" border=0 id="img"/>

<br />

<input name="picture" type="file" id="picture" onchange="img.src=this.value" />

</form>

不需要按钮，直接触发onchange事件就能实现~~~