首页 > 代码库 > 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>

 

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

 

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