首页 > 代码库 > js本地图片预览
js本地图片预览
相信大家都遇到过上传图片之前预览,网上找了很多,但都不是所有浏览器都支持,不过后来找到一个,但自己没有完全实验。
代码如下:
<script> //使用IE条件注释来判断是否IE6,通过判断userAgent不一定准确 if (document.all) document.write(‘<!--[if lte IE 6]><script type="text/javascript">window.ie6= true<\/script><![endif]-->‘); // var ie6 = /msie 6/i.test(navigator.userAgent);//不推荐,有些系统的ie6 userAgent会是IE7或者IE8 function change() { var pic = document.getElementById("pic"); var file = document.getElementById("file1"); if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9,IE9也可以用滤镜来实现 oFReader = new FileReader(); oFReader.readAsDataURL(file.files[0]); oFReader.onload = function (oFREvent) {pic.src =http://www.mamicode.com/ oFREvent.target.result;}; } else if (document.all) {//IE8- file.select(); var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径 if (window.ie6) pic.src = http://www.mamicode.com/reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片 else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现,IE10浏览器不支持滤镜,需要用FileReader来实现,所以注意判断FileReader先 pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=‘image‘,src=http://www.mamicode.com/"" + reallocalpath + "\")"; pic.src = ‘data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==‘;//设置img的src为base64编码的透明图片,要不会显示红xx } } else if (file.files) {//firefox6- if (file.files.item(0)) { url = file.files.item(0).getAsDataURL(); pic.src = url; } } }</script>
使用的HTML如下:
<table><tr><td> 草图:</td><td ><input type="file" name="file1" id="file1" onchange="change()"></td><tr><td>草图浏览:</td><td><img src="images/px.gif" name="pic" id="pic" ></td></tr></table>
没有所有浏览器都测试,不过好像支持的浏览器不少,有兴趣的可以自己测试一下。。。
最后说明一下:这个忘记是从什么地方找到的了,转载了,还望原作者见谅。。。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。