• 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;
        	
        }
    }
    
  • 相关阅读:
    新年初六
    新年初五
    新年初四
    Who moved my cheese?
    红螺寺踏春
    JSP基本语法--实例演练
    JSP基础语法--跳转指令 jsp:forward page
    JSP基本语法--包含指令<%@include file="路径"%> <jsp:include page>
    JSP基本语法--Page指令 <%@page 属性=”内容“%>
    JSP注释及scriptlet <%局部%><%!全局%><%=输出%>
  • 原文地址:https://www.cnblogs.com/wei-dong/p/8405482.html
Copyright © 2020-2023  润新知