js本地图片预览

浏览数：45 / 时间：2015年06月09日

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

代码如下：

<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>