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;
        	
        }
    }
    
  • 相关阅读:
    Splunk Fundamentals 2 – Lab Exercises
    Splunk Fundamentals 1 Lab Exercises
    python交换机自动化巡检
    nginx web服务器
    linux tips
    web服务器统计情况
    HTTP请求报文和响应报文
    python 之路 day 14 HTML CSS
    python 之路 13 ORM SQLAlchemy
    python 之路12 RabbitMQ Python 操作mysql
  • 原文地址:https://www.cnblogs.com/wei-dong/p/8405482.html
Copyright © 2011-2022 走看看