zoukankan      html  css  js  c++  java
  • IE7+ 浏览器兼容预览本地图片

    css

    #preview_fake {
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
        overflow: hidden;
    }
    

     html

    <div class="row">
        <div id="preview_fake"></div>
        <input type="file" name="uploadFile" onchange="previewImage(this)" />
    </div>
    

     js

    //图片上传预览    IE是用了滤镜
    function previewImage(file)
    {
        var self = $(file);
        
        //判断图片格式
        if(!/.(jpg|jpeg|png|JPG|PNG)$/.test(self.val())) {
        	imgErr(self,"请上传JPG或PNG格式的图片");
            return false;
        }
        var objPreviewFake = document.getElementById('preview_fake');
        if (file.files && file.files[0])
        {  //ie10以上火狐谷歌支持
        	var fileData = file.files[0];
        	var size = fileData.size;
            var reader = new FileReader();
    
            //判断图片文件大小不能大于2M
            if(size>0) {
                if (size > 2000 * 1024) {
                	imgErr(self,"上传文件大小不可以超过2M");
                    return false;
                }
            }
            var reader = new FileReader();
            reader.readAsDataURL(file.files[0]);
            reader.onload = function(evt){
              $('<img onclick="openBig(this)" src="' + this.result +'" class="imghead qsc_img_circle">').appendTo(div);
              //修改上传按钮文字
              self.next().find(".qsc_img_btn").text("重新上传");
              //初始化图片收缩放大
              $(".imghead").zoomify();
            };
            var img = self.prev(".qsc_img").find('imghead');
            
        } else if ( objPreviewFake.filters ) //兼容IE,滤镜
        {
        	// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
            //(相同环境有时能显示,有时不显示),因此只能用滤镜来解决
            // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
        	file.select();
            var imgSrc = document.selection.createRange().text;
            $("#preview_fake").css({"width":"50px","height":"50px","margin-right":"140px"});
            objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
        	
        }
    }
    
  • 相关阅读:
    Linux下的文件批量转换为UTF8编码-enca
    【转】valgrind的简介以及安装
    springboot2.0整合logback日志(详细)
    springboot整合redis
    用Thymeleaf在实际项目中遇到的坑
    RedisTemplate和StringRedisTemplate的区别
    @EnableCircuitBreaker熔断超时机制
    eclipse转到idea过程中的基本设置...
    java.lang.NoSuchMethodError
    springcloud服务提供producer and 服务调用consumer
  • 原文地址:https://www.cnblogs.com/wei-dong/p/8405482.html
Copyright © 2011-2022 走看看