当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>HDHCMS教您上传图片时利用BASE64编码预览

HDHCMS教您上传图片时利用BASE64编码预览

时间:2020/5/13 6:11:00 【admin】

HDHCMS教您上传图片时利用BASE64编码预览…

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>HDHCMS教您上传图片时利用BASE64编码预览</title>

</head>

<body>

<div class="ourtpk">

<img src="\content\Images/b4.jpg" id="myimg">

<input type="button" name="" value="上传" onClick="document.getElementById('upfile').click();" />

<input type="file" id="upfile" style='display:none' onchange="GetImgBase64('myimg', 'upfile')">

</div>

<style type="text/css">

.ourtpk{float:left;width:150px;height:200px;background:#999;margin:50px;}

.ourtpk img{float:left;width:150px;height:200px;}

</style>

<script language="javascript">


//获取flie图片路径加载到img中

function GetImgBase64(img, flie) {

    var pic = null;

    var file = null;

    var ext = null;

    var ImgUrl = null;


    if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE

        pic = document.getElementById(img);    //图片

        file = $("#" + flie);      //选择框

        ImgUrl = file.val();

        ext = file.val().substring(file.val().lastIndexOf(".") + 1).toLowerCase();

    } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox

        pic = document.getElementById(img);  //图片

        file = document.getElementById(flie);      //选择框

        ImgUrl = file.value;

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

    } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome

        pic = document.getElementById(img);   //图片

        file = document.getElementById(flie);        //选择框

        ImgUrl = file.value;

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

    } else {

        pic = document.getElementById(img);  //图片

        file = document.getElementById(flie);      //选择框

        ImgUrl = file.value;

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

    }


    // gif在IE浏览器暂时无法显示

    if (ext != 'png' && 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 (isIE) {

        // IE6浏览器设置img的src为本地路径可以直接显示图片

        if (isIE6) {

            pic.src = reallocalpath;

        } else {

            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现

            pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + ImgUrl + "\")";

            // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片

            pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';


        }

    } else {

        Html5GetPic(file, pic);

    }

}

//html加载

function Html5GetPic(file, pic) {

    var file = file.files[0];

    var reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = function (e) {

        pic.src = this.result;

    }

}

</script>

</body>

</html>


扩充阅读

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮