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 + "")";
  • 相关阅读:
    HTML常用标记(完整版)
    理论精讲-教育知识与能力7-第四章 中学生学习心理
    前端面试题总结
    for-in 和for-of循环的区别
    Nginx部署多个vue前端项目
    vue项目PC端如何适配不同分辨率屏幕
    基于Vue的项目打包为移动端app
    js中Date对象
    React Router的Route的使用
    js中数组的sort() 方法
  • 原文地址:https://www.cnblogs.com/miny-simp/p/8274919.html
Copyright © 2011-2022 走看看