码迷,mamicode.com
首页 > Web开发 > 详细

js本地图片预览

时间:2014-08-13 17:54:16      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   java   使用   os   io   文件   

相信大家都遇到过上传图片之前预览,网上找了很多,但都不是所有浏览器都支持,不过后来找到一个,但自己没有完全实验。

代码如下:

<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 = oFREvent.target.result;};        
        }
        else if (document.all) {//IE8-
            file.select();
            var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
            if (window.ie6) pic.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片
            else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现,IE10浏览器不支持滤镜,需要用FileReader来实现,所以注意判断FileReader先
                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=‘image‘,src=\"" + 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>

 

没有所有浏览器都测试,不过好像支持的浏览器不少,有兴趣的可以自己测试一下。。。

 

最后说明一下:这个忘记是从什么地方找到的了,转载了,还望原作者见谅。。。

js本地图片预览,布布扣,bubuko.com

js本地图片预览

标签:style   blog   color   java   使用   os   io   文件   

原文地址:http://www.cnblogs.com/iguxiaobei/p/3910283.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!