JS将图片转换成Base64码

直接上代码

html页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script src="Base64Img.js"></script>
    <style>
        label {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            cursor: pointer;
        }
        /*隐藏默认样式*/
        input[id=file] {
            margin-left: -2000px;
            height: 0;
        }
        /*隐藏默认样式*/
        input[id=file1] {
            margin-left: -2000px;
            height: 0;
        }
    </style>
</head>
<body>
    <div>
        <label for="file" id="upload_file">上传文件</label>
        <input type="file" accept="image/*" id="file">
        <div class="span" id="update_file_label"></div>
        <input type="hidden" id="base64_output" />
        <div class="strong red" id="img_size"></div>
        <img id="img_prev" src="../images/member/nophoto.gif" style="max-width: 100%; border: 1px solid gray;">


        <label for="file1" id="upload_file1">上传文件</label>
        <input type="file" accept="image/*" id="file1">
        <div class="span" id="update_file_label1"></div>
        <input type="hidden" id="base64_output1" />
        <div class="strong red" id="img_size1"></div>
        <img id="img_prev1" src="../images/member/nophoto.gif" style="max-width: 100%; border: 1px solid gray;">
    </div>
    <script>
        $(function () {
            $("#file").bind("change", function () {
                $("#update_file_label").html(this.value);
                gen_base64('base64_output', 'img_size', 'img_prev', 'file');
            });

            $("#file1").bind("change", function () {
                $("#update_file_label1").html(this.value);
                gen_base64('base64_output1', 'img_size1', 'img_prev1', 'file1');
            });
        });
    </script>
</body>
</html>

Base64Img.js代码：

function $_(id) {
    return document.getElementById(id);
}
/*把图片转成Base64码
@param 参数说明：
codeInput:把转好的Base64码存放在哪个控件中
imgSize:图片的大小（单位是KB）
imgSrc:点击上传后图片的显示的标签
fileInputId:上传控件的ID
*/
function gen_base64(codeInput, imgSize, imgSrc, fileInputId) {
    $_(codeInput).value = '';
    $_(imgSize).innerHTML = '';
    $_(imgSrc).src = '../images/member/nophoto.gif';
    var file = $_(fileInputId).files[0];
    if (!/image\/\w+/.test(file.type)) {
        alert("请确保文件为图像类型");
        return false;
    }
    r = new FileReader();  //本地预览
    r.onload = function () {
        $_(codeInput).value = r.result;
        $_(imgSrc).src = r.result;
        //$("#img_prev").attr("src", r.result);
        //$("#img_prev").css("width", "50%");
        $_(imgSize).innerHTML = "    图片大小：" + Math.round(r.result.length / 1024 * 1000) / 1000 + " KB";
    }
    r.readAsDataURL(file);
}
//window.onload = function () {
//    if (typeof (FileReader) === 'undefined') {
//        alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
//        $_('upload_file').disabled = true;
//    }
//}

//使用demo
//<!DOCTYPE html>
//<html lang="en">
//<head>
//    <meta charset="UTF-8">
//    <title>上传文件</title>
//    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
//    <script src="../Scripts/Module/Common/Base64Img.js"></script>
//    <style>
//        label {
//            position: relative;
//            display: inline-block;
//            background: #D0EEFF;
//            border: 1px solid #99D3F5;
//            border-radius: 4px;
//            padding: 4px 12px;
//            overflow: hidden;
//            color: #1E88C7;
//            text-decoration: none;
//            text-indent: 0;
//            line-height: 20px;
//            cursor: pointer;
//        }
///*隐藏默认样式*/
//input[id=file] {
//    margin-left: -2000px;
//    height: 0;
//}
//</style>
//</head>
//<body>
//<div>
//    <label for="file" id="upload_file">上传文件</label>
//    <input type="file" accept="image/*" id="file">
//    <div class="span" id="update_file_label"></div>
//    <input type="hidden" id="base64_output" />
//    <div class="strong red" id="img_size"></div>
//    <img id="img_prev" src="../images/member/nophoto.gif" style="max-width: 100%; border: 1px solid gray;">
//</div>
//<script>
//    $(function () {
//        $("#file").bind("change", function () {
//            $("#update_file_label").html(this.value);
//            gen_base64('base64_output', 'img_size', 'img_prev', 'file');
//        });
//    });
//</script>
//</body>
//</html>

最终效果

base64码存在放隐藏控件中，直接用Jquyer获取就可以了

JS将图片转换成Base64码

猜你喜欢