首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

有点小揪心,IE和chrome上预浏览图片有关问题

2013-12-04 
有点小揪心,IE和chrome上预浏览图片问题。 function display(x){document.getElementById(p).style.displ

有点小揪心,IE和chrome上预浏览图片问题。

 function display(x){
      document.getElementById('p').style.display = x;
   }
   function pric(){
  var p = document.getElementById('file');
    p.click();
   document.getElementById('img').src = p.value;
   }

<a href="javascript:;" onclick="display('block')">修改头像</a>
<center>
<div class="lk" id="p" style="display:none">
<div id="d">
<div class="c">
    <input style="display:none;" id="file" type="file" />
 <img id="img" width="100" height="100" />
 </div>
    <div class="b">
    <a href="#" onclick="display('none')">上传</a>
        <a href="#" onclick="pric()">预览</a>
    </div>
</div>
</div>
</center>

怎么解决这个问题,目前我没有用到jquery    在IE上 点击浏览,图片可以显示,
在chrome 上点击浏览,图片 预览不到。。。。如何解决呢
[解决办法]
安全问题不允许显示本地图片,兼容性最好的办法就是上传到服务器后返回临时文件名来实现预览

IE发布网站后除了ie6,ie7+也加载不了本地图片实现预览的
[解决办法]
既然ie通过安全漏洞解决了,那其他的就好办了

html5有file api,chrome完美支持


<img id="uploadPreview" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">

    function PreviewImage() {
        oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };
    };

</script>

[解决办法]
本地图片,用户在选择图片时,操作系统就可以预览。完全没必要预览本地图片。

先上传到服务器,显示上传后的 服务器上面的图片
[解决办法]
显示本地图片?那你的所谓ie显示应该也是ie的低版本吧?浏览器安全性提高以后,不允许显示本地图片了,所以要么是flash,或者sl。。。
[解决办法]
按照5#的改了下,测试了设置file控件透明覆盖在预览上兼容好,不要使用file.click(),要不firefox下报错。safari不行,需要上传,不支持FileReader。。

<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(file,pic) {
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;
            }
        }
    }
    function display(x) {
        document.getElementById('p').style.display = x;
    }
</script>
<a href="javascript:;" onclick="display('block')">修改头像</a>
<center>
<div class="lk" id="p" style="display:none">
<div id="d">
    <div class="c">
         <img id="img" width="100" height="100" />
     </div>
    <div class="b">
        <a href="#" onclick="display('none')">上传</a>
        <a href="#" style="position:relative"><input onchange="change(this, document.getElementById('img'))" size="0" style="width:30px;cursor:pointer;opacity:0;filter:alpha(opacity=0);position:absolute;left:0px;top:0px;" id="file" type="file" />预览</a>
    </div>
</div>
</div>
</center>


[解决办法]
java就不懂了啵。。看提示应该是保存文件的位置不允许写入,没写入权限。。
[解决办法]
引用:
Quote: 引用:

按照5#的改了下,测试了设置file控件透明覆盖在预览上兼容好,不要使用file.click(),要不firefox下报错。safari不行,需要上传,不支持FileReader。。

<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(file,pic) {
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;
            }
        }
    }
    function display(x) {
        document.getElementById('p').style.display = x;
    }
</script>
<a href="javascript:;" onclick="display('block')">修改头像</a>
<center>
<div class="lk" id="p" style="display:none">
<div id="d">
    <div class="c">
         <img id="img" width="100" height="100" />
     </div>
    <div class="b">


        <a href="#" onclick="display('none')">上传</a>
        <a href="#" style="position:relative"><input onchange="change(this, document.getElementById('img'))" size="0" style="width:30px;cursor:pointer;opacity:0;filter:alpha(opacity=0);position:absolute;left:0px;top:0px;" id="file" type="file" />预览</a>
    </div>
</div>
</div>
</center>

恩通过这种方式可以解决这个问题, 但是我遇到个新的问题,因为我是把这个通过表单的形式上传到服务器,但会提示这个...

java.io.FileNotFoundException: E:\Myeclipse\apache-tomcat-6.0.35\webapps\Login\WebRoot\photo\my (拒绝访问。)
at java.io.FileOutputStream.open(Native Method)
at java.io.FileOutputStream.<init>(FileOutputStream.java:179)
at java.io.FileOutputStream.<init>(FileOutputStream.java:131)
at servlet.ModifyHeadServlet.doPost(ModifyHeadServlet.java:62)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:637)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at filter.CheckUser.doFilter(CheckUser.java:44)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:235)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at filter.EncodingChange.doFilter(EncodingChange.java:28)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:235)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:293)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:859)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:602)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)
at java.lang.Thread.run(Thread.java:619)



E:\Myeclipse\apache-tomcat-6.0.35\webapps\Login\WebRoot\photo\my文件夹要不不存在,要么无权访问

貌似你要把文件存在这里,但是需要这个文件夹存在并有访问权限
[解决办法]
FileReader在safari6.0之前确实也不行
[解决办法]
引用:
Quote: 引用:

显示本地图片?那你的所谓ie显示应该也是ie的低版本吧?浏览器安全性提高以后,不允许显示本地图片了,所以要么是flash,或者sl。。。
我这个IE9
好像从ie8开始就不能预览本地图片了吧?
[解决办法]
引用:
Quote: 引用:

Quote: 引用:

Quote: 引用:

显示本地图片?那你的所谓ie显示应该也是ie的低版本吧?浏览器安全性提高以后,不允许显示本地图片了,所以要么是flash,或者sl。。。
我这个IE9
好像从ie8开始就不能预览本地图片了吧?
你用我发的那个代码测试下
测试了一下,只有ie的低版本可以,其他都不行,别说ie8了,貌似7都够呛。。。
[解决办法]
引用:
Quote: 引用:

java就不懂了啵。。看提示应该是保存文件的位置不允许写入,没写入权限。。

用我上面的代码,虽然不能显示,但是可以写进去的。 换成你这个就不行了,


我测试了可,使用的是jquery.ajaxfileupload.js


有问题就是没注意看你贴出来的file控件没有name属性,只有id,这样文件是不会上传的,增加name属性。而且你的file控件要放到表单中

<a href="#" style="position:relative"><input name="file" onchange="change(this, document.getElementById('img'))" size="0" style="width:30px;cursor:pointer;opacity:0;filter:alpha(opacity=0);position:absolute;left:0px;top:0px;" id="file" type="file" />预览</a>
[解决办法]
发你怎么使用的代码全来,我这里测试可以上传的,应该是你没用对那个fileupload插件什么的

<html>
<head>
<title>Ajax File Uploader Plugin For Jquery</title>
<link href="ajaxfileupload.css" type="text/css" rel="stylesheet">
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="content">    
<img id="loading" src="loading.gif" style="display:none;">
<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(file, pic) {
        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;
            }
        }
    }
    function display(x) {
        document.getElementById('p').style.display = x;
    }

    function ajaxFileUpload() {
        $("#loading").ajaxStart(function () { $(this).show(); }).ajaxComplete(function () { $(this).hide(); });
        alert('ready')
        $.ajaxFileUpload({
            url: 'save.ashx',
            secureuri: false,
            fileElementId: 'file',
            dataType: 'json',
            data: { name: 'logan', id: 'id' },
            success: function (data, status) {
                if (data.success) alert('上传成功,返回的文件名:' + data.msg); else alert('错误:' + data.msg);
            },
            error: function (data, status, e) {
                alert(e);
            }
        })
        alert('send')
        return false;

    }
</script>
<a href="javascript:;" onclick="display('block')">修改头像</a>
<center>
<div class="lk" id="p" style="display:none">
<div id="d">
    <div class="c">
         <img id="img" width="100" height="100" />
     </div>
    <div class="b">
        <a href="#" onclick="ajaxFileUpload()">上传</a>
        <a href="#" style="position:relative"><input onchange="change(this, document.getElementById('img'))" size="0" style="width:30px;cursor:pointer;opacity:0;filter:alpha(opacity=0);position:absolute;left:0px;top:0px;" id="file" type="file" />预览</a>


    </div>
</div>
</div>
</center>
    </div>
    

</body>
</html>

热点排行