zoukankan      html  css  js  c++  java
  • js在本地预览图片

    移动web

    <body>
    <form enctype="multipart/form-data" name="form1">
    上传文件:<input id="f" type="file" name="f" onchange="change()" />
     
    预览:<img id="preview" alt="" name="pic" width="300" height="150" />
    </form>
    
    <script>
    function change() {
         var pic = document.getElementById("preview");
         var file = document.getElementById("f");
         var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//js获取文件名的后缀
         html5Reader(file);
     }
     
     function html5Reader(file){
         var file = file.files[0];
         var reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = function(e){
             var pic = document.getElementById("preview");
             pic.src=this.result;
         }
     }
    </script>   
    </body>
    </html>

    兼容ie版本

    function change() {
         var pic = document.getElementById("preview");
         var file = document.getElementById("f");
         var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
         // gif在IE浏览器暂时无法显示
         if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
             alert("文件必须为图片!"); return;
         }
         // IE浏览器
         if (document.all) {
     
             file.select();
             var reallocalpath = document.selection.createRange().text;
             var ie6 = /msie 6/i.test(navigator.userAgent);
             // IE6浏览器设置img的src为本地路径可以直接显示图片
             if (ie6) pic.src = reallocalpath;
             else {
                 // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现
                 pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" + reallocalpath + "")";
                 // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
                 pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
             }
         }else{
             html5Reader(file);
         }
     }
     
     function html5Reader(file){
         var file = file.files[0];
         var reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = function(e){
             var pic = document.getElementById("preview");
             pic.src=this.result;
         }
     }
  • 相关阅读:
    ora12514
    telnet到虚拟机上的red hat linux失败——解决办法
    linux下监听的配置
    本机win7系统与虚拟机中的linux系统实现通讯
    ORA01078: failure in processing system parameters LRM00109: could not open parameter file '/oradata/oracle/112/dbs/in
    Xmanager无法登录Red Hat Linux——解决方法
    几种常见算法的介绍及复杂度分析(转)
    Linux学习笔记18cal显示日历
    Linux学习笔记14架设Apache http服务器
    Installing Oracle Database 10g on Linux
  • 原文地址:https://www.cnblogs.com/jdhu/p/4279771.html
Copyright © 2011-2022 走看看