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;
        	
        }
    }
    
  • 相关阅读:
    POJ 1003 解题报告
    POJ 1004 解题报告
    POJ-1002 解题报告
    vi--文本编辑常用快捷键之光标移动
    常用图表工具
    September 05th 2017 Week 36th Tuesday
    September 04th 2017 Week 36th Monday
    September 03rd 2017 Week 36th Sunday
    September 02nd 2017 Week 35th Saturday
    September 01st 2017 Week 35th Friday
  • 原文地址:https://www.cnblogs.com/wei-dong/p/8405482.html
Copyright © 2011-2022 走看看