base64图片上传

Posted zimengxiyu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了base64图片上传相关的知识，希望对你有一定的参考价值。

图片上传

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/grzl.css" />
        <title>个人资料</title>
        <style>
            .form-btn {
                margin-top: 12rem;
            }
        </style>
    </head>

    <body>
        <!--header-->
        <div class="header">
            <i class="header-calendar" id="return"></i>
            <h3><span>个人资料</span></h3>
        </div>
        <form>
            <ul class="tab-nav">                
            </ul>
            <div class="form-btn">
                <input type="button" value="保存" id="form-btn" />
            </div>
        </form>
        <script type="text/javascript" src="js/jquery.1.10.2.js"></script>
        <script type="text/javascript" src="js/template-web.js"></script>
        <script type="text/javascript" src="layer/layer.js" ></script>
        <script type="text/javascript" src="js/mui.min.js" ></script>
        <script type="text/javascript" src="js/plusready.js" ></script>
        <script id="main" type="text/html">
            <li>
                <span>头像</span>
                <div id="prvid" class="prvid tab-nav-fr">
                    {{if data.data.user_img==="http://kt106.zs.ktwlkj.com"}}
                        <img src="img/goods.jpg" />
                    {{else}}
                        <img src={{data.data.user_img}} />
                    {{/if}}
                </div>

                <input type="file" id="files" onchange="previewImage(this, ‘prvid‘)" />
            </li>
            <li>
                <span>用户ID</span>
                <em class="tab-nav-fr">{{data.data.id}}</em>
            </li>
            <li>
                <span>昵称</span>                
                <input type="text" class="tab-nav-fr" id="username" placeholder="请输入用户名" value={{data.data.username}} >                
            </li>
        </script>    
        <script>

            //返回上一页
            !(function() {
                var goReturn = document.getElementById("return");
                goReturn.onclick = function() {
                    window.history.go(-1)
                }
            })()
        
            var user_img; //图片

            //把图片转成base64
            function previewImage(file, prvid) {
                /* file：file控件
                 * prvid: 图片预览容器
                 */
                var tip = "Expect jpg or png or gif!"; // 设定提示信息
                var filters = {
                    "jpeg": "/9j/4",
                    "gif": "R0lGOD",
                    "png": "iVBORw"
                }
                var prvbox = document.getElementById(prvid);
                prvbox.innerHTML = "";
                if(window.FileReader) { // html5方案
                    for(var i = 0, f; f = file.files[i]; i++) {
                        var fr = new FileReader();
                        fr.onload = function(e) {
                            var src = e.target.result;
                            if(!validateImg(src)) {
                                //alert(tip);
                                mui.toast(‘图片格式错误‘);
                            } else {
                                showPrvImg(src);
                            }
                        }
                        fr.readAsDataURL(f);
                    }
                } else { // 降级处理

                    if(!/.jpg$|.png$|.gif$/i.test(file.value)) {
                        //alert(tip);
                        mui.toast(‘图片格式错误‘);
                    } else {
                        showPrvImg(file.value);
                    }
                }

                function validateImg(data) {
                    var pos = data.indexOf(",") + 1;
                    for(var e in filters) {
                        if(data.indexOf(filters[e]) === pos) {
                            return e;
                        }
                    }
                    return null;
                }
                //图片
                function showPrvImg(src) {
                    var img = document.createElement("img");
                    img.src = src;
                    prvbox.appendChild(img);
                    user_img = src //向后台传输的图片
                }
            }

            var api = localStorage.getItem("api");
            $.post(api + "/api/user/user_index", {
                    Authorization: localStorage.getItem("token")
                },
                function(data) {
                    console.log(data);
                    var tabNav = document.querySelector(".tab-nav");
                    tabNav.innerHTML = template(‘main‘, {
                        data
                    });
                });

            //保存数据
            $("#form-btn").click(function() {
                var username=$("#username").val();
                if(!username){
                    return layer.msg("用户名不能为空");
                }
                $.post(api + "/api/user/member_update", {
                        user_img: user_img,
                        username: username,
                        Authorization: localStorage.getItem("token")
                    },
                    function(data) {
                        location.href = "wd.html";
                    });

            })
        </script>

    </body>

</html>

 

以上是关于base64图片上传的主要内容，如果未能解决你的问题，请参考以下文章

java上传不同类型图片,保存数据库(Base64位图转网络图片)

js实现图片上传预览功能，使用base64编码来实现

Vue结合element ui 实现图片上传可预览，可删除,以base64字符串上传到服务器

android 图片转BASE64上传提示java.lang.OutOfMemoryError

使用 Firebase 存储上传 base64 图像

上传图片文件转换成blob