js本地图片预览

时间：2024-09-02 14:37:14

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

代码如下：

<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="data:images/px.gif" name="pic" id="pic" >

</td></tr>

</table>

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

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

相关文章