兼容各浏览器上传浏览(包括ie6)

来源:互联网 发布:cocos js button 隐藏 编辑:程序博客网 时间:2024/05/20 20:03

<input id="f" type="file" name="f" onchange="change(this,'preview',120,160)" />
    <div class="upload">上传图片</div>
    <p>预览:</p>
    <p class="pic">
<img id="preview" alt="" name="pic" src="http://www1.pclady.com.cn/images/blank.gif" />
    </p>


js:

function change(file,previewID,bW,bH) {

    var pic = document.getElementById(previewID),
        file = file,
ua = navigator.userAgent,
msIE = "MSIE",
iEua = ua.indexOf(msIE);
if (iEua >= 0) {   
//获取IE版本号   
var ver = parseFloat(ua.substr(iEua + msIE.length));
}
//获取ie文档模式
var ieMode=document.documentMode||ver;

    var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();
    // gif在IE浏览器暂时无法显示
    if (ext != 'png' && ext != 'gif' && ext != 'jpg' && ext != 'jpeg') {
        alert("图片的格式必须为png或者jpg或者jpeg格式!");
        return;
    }
    /*var isIE = navigator.userAgent.match(/MSIE/) != null,
        isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null;*/
    if (ieMode<10) {
        file.select();
        file.blur();
        var reallocalpath = document.selection.createRange().text;
var width=bW||200;  //预定义宽,图片的宽度了
var height=bH||150; //预定义高,如果宽小于长度,那么他会自适应按照宽度来计算比例,所以对于一般情况长>宽的照片时候,这个参数没啥意义
        // IE6浏览器设置img的src为本地路径可以直接显示图片
        /*if (ieMode==5) {
            pic.src = reallocalpath;
var ratW; //宽的缩小比例 
var ratH; //高的缩小比例 
var rat; //实际使用的缩小比例
if (pic.offsetWidth < width && pic.offsetHeight < height) {
return;
}else{
ratH = height / pic.offsetHeight;
ratW = width / pic.offsetWidth;
if (ratH < ratW) //选择最小的作为实际的缩小比例 
rat = ratH;
else
rat = ratW;
pic.width=pic.offsetWidth * rat;
pic.height=pic.offsetHeight * rat;
}
        }else {*/
            //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现
            pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
            //设置img的src为base64编码的透明图片 取消显示浏览器默认图片
if(ieMode==6){
pic.src = 'http://www1.pclady.com.cn/images/blank.gif';
}else{
            pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}

var ratW; //宽的缩小比例 
var ratH; //高的缩小比例 
var rat; //实际使用的缩小比例
if (pic.offsetWidth < width && pic.offsetHeight < height) {
//如果比预定义的宽高小,原图显示。 
pic.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
return;
}else{
ratH = height / pic.offsetHeight;
ratW = width / pic.offsetWidth;
if (ratH < ratW) //选择最小的作为实际的缩小比例 
rat = ratH;
else
rat = ratW;
pic.width=pic.offsetWidth * rat;
pic.height=pic.offsetHeight * rat;
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")";
}
        //}
    } else {
        html5Reader(file,previewID);
    }
}


function html5Reader(file,previewID) {
    var file = file.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        var pic = document.getElementById(previewID);
        pic.src = this.result;
    }
}
0 0
原创粉丝点击