zoukankan      html  css  js  c++  java
  • 图片预览兼容IE8处理

    图片预览兼容IE处理

    (IE8 用滤镜实现上传预览图片,解决C:fakepath*.jpg问题,获取本地路径)

    html:

    <div id="preview"></div>
    <input type="file" id="file_upl" onchange="imgPreview(this)">

    js:

    function imgPreview(file) {
        var prevDiv = document.getElementById('preview');
    
        if (file.files && file.files[0])
        {
            var reader = new FileReader();
            reader.onload = function(evt){
                prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
            }
            reader.readAsDataURL(file.files[0]);
        } else
        {
    var file_upl = document.getElementById('file_upl'); file_upl.select(); var realpath = document.selection.createRange().text; prevDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src="" + realpath + "")"; } }

    在用document.selection前,我们需要先创建选中区。如鼠标选中文本框,即是一个选中区。也可以通过js提供的select()方法创建一个选中区。创建了选中区后,我们就可以通过document.selection获取该选中区。如果要对选中区执行操作,则需要先调用createRange()方法。

    //获取上传文件控件的值;
    file.select();
    var realpath = document.selection.createRange().text;

    现有的获取IE低版本上传文件的value值一般都是这种方式,在IE中原本可以直接通过input的value值来获取上传图片的路径,但是在实际中很少看到使用。具体的大家可以去查查资料。
    非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现。

    pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src="" + realpath + "")";
  • 相关阅读:
    8u111-jdk-alpine 字体缺少FontConfiguration的NullPointerException错误解决方案
    Mybatis插件原理
    Mybaits 分页
    @requestBody 和@RequestParam
    Mybaits 生产mapper
    powerDesigner 生成SQL时没有注释问题
    HashMap 的 put过程
    Java的锁
    Java1.8 JVM配置 GC日志输出
    Windows 安装两个MYSQL实例
  • 原文地址:https://www.cnblogs.com/miny-simp/p/8274919.html
Copyright © 2011-2022 走看看