• IE读取并显示本地图像文件的方法


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>get file input full path</title>
    <script language='javascript'>
    function getFullPath(obj)
    {
    if(obj)
    {
    //ie
    if (window.navigator.userAgent.indexOf("MSIE")>=1)
    {
    obj.select(); alert(document.selection.createRange().text);
    return document.selection.createRange().text;

    }
    //firefox
    else if(window.navigator.userAgent.indexOf("Firefox")>=1)
    {
    if(obj.files)
    {
    return obj.files.item(0).getAsDataURL();
    }
    return obj.value;
    }
    return obj.value;
    }
    }
    </script>
    </head>
    <body>
    <input type="file" onchange="document.getElementById('img').src=getFullPath(this);" />
    <img id="img" />
    </body>
    </html>

    ~~~~以上的方法在 双击打开网页 或者 自己的电脑作为web服务器的情况 没问题,到时放到实际远程web服务器中 会因为浏览器的安全限制 IE还是不能获得用户所选文件在用户文件系统的绝对路径,较为好一点的方法 是滤镜加载图片 但是不够完美 如下:

    ----------------------------------------

    <script type="text/javascript">
    var himgCH; //头像在320视窗中的计算高度
    $(function(){
    var supportFileReader;
    try{ if( (typeof FileReader) =='function') supportFileReader = true;}catch(e){ supportFileReader=false; }
    var isie = navigator.userAgent.toLowerCase().indexOf('msie')>=0;
    $('#himgfile').change(function(){
    if(navigator.userAgent.toLowerCase().indexOf('msie')<0 || supportFileReader ){ //(!ie or ie10) chrome , firefox
    var file = this.files[0]; //用户选择的文件
    if(! /image/w+/.test(file.type) ){ //file.type 文件的mime值
    alert("请选择图像文件");
    }else{

    var reader = new FileReader();
    reader.readAsDataURL(file);//用户选择的文件readAsDataURL
    reader.onload = function(){
    // $('#pic4up').attr('src',this.result);
    $('#p_up').attr('src', this.result);
    $('#p_prev').attr('src', this.result);
    var img = new Image();
    img.src = this.result;
    setTimeout(function(){ //不能马上获得img的计算高度 适当延时
    // console.log(img.width);
    $('#scale').val( img.width/320 );

    himgCH = $('#p_up').height();
    $('#p_up').height(himgCH);
    $('#p_up').imgAreaSelect({aspectRatio:'1:1', onSelectChange: preview});
    },100 );

    }
    }
    }else{ //ie 6 7 8
    //alert('using ie8- , file value:' + this.value);
    // $('#pic4up')[0].src=this.value;
    this.select();
    // $('#pic4up')[0].src = document.selection.createRange().text;
    var img = new Image(); //alert('choose file path:' + document.selection.createRange().text );
    var fpath = document.selection.createRange().text; //获取文件域的路径
    // $('#p_prev')[0].src = img.src = $('#p_up')[0].src = fpath; //文件本地路径 赋值给img.src 实现预览

    //AlphaImageLoader实现预览 关键点: AlpahaImageLoader src=本地路径 加载的是客户端文件系统的本地路径 AlphaImageLoader加载的图片位于 容器背景和内容之间
    img.src = fpath; //获取图片的原始尺寸
    $('#p_prev,#p_up').each(function(i, ele, eles){
    this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";
    this.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fpath;
    if(this.id == 'p_prev') this.src = 'images/blank320_320.gif';
    });

    setTimeout(function(){ //不能马上获得img的计算高度 适当延时
    // alert(img.width);
    $('#scale').val(img.width/320);
    himgCH = $('#p_up').height();
    $('#p_up').height(himgCH);
    $('#p_up').imgAreaSelect({aspectRatio:'1:1', onSelectChange: preview});
    },100 );
    }

    //$('.iMask').removeClass('hide');
    $('.btn_disable').addClass('btn_enable');
    });

  • 相关阅读:
    并发编程的艺术
    Redis字符串实现,SDS与C的区别,空间预分配
    Jvm
    Redis数据结构的实现
    发一篇感谢身边的所有从事it工作的朋友
    BeanFactory 默认的注入实现类DefaultListableBeanFactory
    jsSwitch语句优化
    彻底搞懂 Nginx 的五大应用场景
    Spring Boot 整合 Quartz 轻松实现任务调度!
    js计算两个给定日期之间的天数
  • 原文地址:https://www.cnblogs.com/stephenykk/p/3456368.html
Copyright © 2020-2023  润新知