美文网首页
图片上传兼容到ie8

图片上传兼容到ie8

作者: 怪我呦 | 来源:发表于2017-05-19 14:51 被阅读0次

    判断该浏览器是否支持windows.FileReader

    HTML5的FileReader接口支持本地预览,FileReader接口主要是将文件读入内存,并提供相应的方法,来读取文件中的数据,当然就能显示本地图片不需上传了

    //支持主浏览器chrome等

    If(window.FileReader){

    var file = input.files[0];

    //console.log(file)

    var size=file.size; //文件的大小

    //如果要限定上传文件的类型,可以通过文件选择器获取文件对象并通过type属性来检查文件类型

    1)if(!/image\/\w+/.test(file.type)){

    alert("请确保文件为图像类型");

    $(input).val("");//把input里面的内容清空

    return false;

    }

    2)var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();

    if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){

      alert("图片的格式必须为png或者jpg或者jpeg格式!");

    $(input).val("");

    return false;

    }

    //新建FileReader 对象把文件的路径给img的src

    var reader = new FileReader();//新建一个FileReader

    reader.readAsText(files);//读取文件

    reader.onload = function(){ //读取完文件之后会回来这里

    $(input)...find("img")[0].src = this.result;

    }

    //若不支持window.FileReader 即支持IE 7 8 9 10

    }else if(typeof window.ActiveXObject != 'undefined'){

    input.select();//input获得选中

    //input.blur();//失去焦点,或者让其他的对象获得焦点element.focus();

    var nfile = document.selection.createRange().text;

    //ie8 要通过滤镜的方式获得图片 滤镜要给div不能直接给img 即IE8下,img标签的src是无效的只能通过滤镜来解决

    $($(input).parents(".attachContainorDiv:first").find("img")[0]).remove();

    $($(input).parents(".attachContainorDiv:first").find(".temImg")[0]).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+nfile+"')");

    }

    }

    注意:input不能设置成display:none,不然IE8还是不认。做法是把input的设置成透明度设为0、或者设置z-index。

    一般用在ie7/8,在file控件select后再通过selection对象获得文件本地路径。此时file控件不能隐藏,否则不能被select.

    https://github.com/wenshunxin/gms

    相关文章

      网友评论

          本文标题:图片上传兼容到ie8

          本文链接:https://www.haomeiwen.com/subject/emyyxxtx.html