js将图片转为base64编码，以字符串传到后台存入数据库

最新推荐文章于 2024-03-08 21:33:31 发布

carcarrot

最新推荐文章于 2024-03-08 21:33:31 发布

阅读量2.6k

点赞数

分类专栏： Javascript HTML 文件操作

原文链接：https://www.bbsmax.com/A/1O5ERm13d7/

版权

Javascript 同时被 3 个专栏收录

49 篇文章 0 订阅

订阅专栏

HTML

30 篇文章 0 订阅

订阅专栏

文件操作

11 篇文章 0 订阅

订阅专栏

（前台在中approve_edit.html中，后台不变）

链接参考：http://www.cnblogs.com/Strom-HYL/p/6782176.html

该链接文中并没有用到easyUI的相关样式，也没有将图片的缩略图展示出来

现用一个新建页面进行显示，先看一下效果图：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="../skin/easyui/icon.css">
    <link rel="stylesheet" type="text/css" href="../skin/easyui/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../skin/css/form.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/DateUtil.js"></script>
    <script type="text/javascript" src="../js/JsonUtil.js"></script>
    <script type="text/javascript" src="../js/kindeditor/kindeditor-min.js"></script>
    <script type="text/javascript" src="../js/validator.js"></script>
    <style type="text/css">
        .datagrid-toolbar {border-bottom: 1px #95B8E7 solid;}
    </style>
</head>
<body class="easyui-layout">
<div data-options="region:'center',title:'新建收储信息',collapsible:false" style="height:66px">
    <div class="datagrid-toolbar" style="height: 25px;padding: 5px;">
        <a class="easyui-linkbutton" class="btnBack" onClick="back()" data-options="iconCls:'icon-back'">返回</a>
        <a class="easyui-linkbutton" class="btnSave" onClick="save()" data-options="iconCls:'icon-save'">保存</a>
    </div>
    <div>
        <input type="file" style="display: none;" id="demo_input" />
        <form id="form">
            <table class="TBLForm" cellpadding="5" width="100%">
                <tr>
                    <td width="20%" class="Rightxs">批次名称</td>
                    <td colspan="3"><input class="easyui-textbox" id="xmmc" name="xmmc" required style="width: 800px"/></td>
                </tr>
                <tr>
                    <td width="20%" class="Rightxs">地块编号</td>
                    <td width="30%">
                        <input class="easyui-textbox" id="dkbh" name="dkbh" style="width: 232px"/>
                    </td>
                    <td width="20%" class="Rightxs">地块面积</td>
                    <td><input style="width: 232px" class="easyui-numberbox" precision="3" type="text" id="dkmj" name="dkmj"/></td>
                </tr>
                <tr>
                    <td width="20%" class="Rightxs">地块名称</td>
                    <td colspan="3"><input class="easyui-textbox" id="dkmc" name="dkmc" style="width: 800px"/></td>
                </tr>
                <tr>
                    <td width="20%" class="Rightxs">地块位置</td>
                    <td colspan="3"><input class="easyui-textbox" id="dkwz" name="dkwz" style="width: 800px"/></td>
                </tr>
                <tr>
                    <td width="20%" class="Rightxs">位&nbsp;&nbsp;置&nbsp;&nbsp;图</td>
                    <td colspan="3">
                        <textarea id="result" name="dkwzt" rows=30 cols=300 style="width: 100px;height: 100px;display: none;"></textarea><!--用于存放图片转为base64编码字符串-->
                        <div>
                            <a id="upBtn_up" class="easyui-linkbutton" iconCls="icon-up" plain="false" onclick="upLoadBack()">上传</a>
                        </div>
                        <div>
                            <p id="img_area" ondblclick="img()"></p><!--用于显示图片-->
                        </div>
 
                    </td>
                </tr>
                <tr>
                    <td width="20%" class="Rightxs">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
                    <td colspan="3">
                        <input class="easyui-textbox" id="bz" name="bz" style="width: 800px;height: 150px" data-options="multiline:true"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<!--图片弹出框-->
<div id="hmc" class="easyui-dialog" closed="true">
    <div id="tp">
        <img style="width: 400px;height: 400px" src=""/>
    </div>
</div>
</body>

JavaScript：

 <script type="text/javascript">
    var backUrl=getQueryStr("backUrl");
    var id=getQueryStr("id");
    var pageNum=getQueryStr("pageNum");
    $(function(){
        if(id==""){
            loadTitle("新建");
        }else{
            loadTitle("修改");
            loadInfo();
        } 
    });
 
    //加载标题
    function loadTitle(type){
        $('.easyui-layout').layout('panel', 'center').panel({title: type + "征地项目信息"});
    }
    //加载修改表单
    function loadInfo(){
        var data=getJsonData("../getApproveInfo.hebe",id);
        $("#form").form("load",data);
    //当没有图片的时候则显示一张无图照片
        if(data.dkwzt==""){
            $("#img_area").html('<img style="width: 100px;height: 100px" src="../skin/images/nopic.png"/>');
        }else{
            //在图片显示处添加该图片
            $("#img_area").html('<img style="width: 100px;height: 100px" src="' + data.dkwzt + '"/>');
    //在图片弹出框处显示该图片
            $("#tp img").attr("src", data.dkwzt);
        }
 
    }
      //打开文件框
    function upLoadBack(){
        $("#demo_input").click();
    }
    window.onload = function(){
        var input = document.getElementById("demo_input");
        var result= document.getElementById("result");
        var img_area = document.getElementById("img_area");
        if ( typeof(FileReader) === 'undefined' ){
            result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
            input.setAttribute( 'disabled','disabled' );
        } else {
            input.addEventListener( 'change',readFile,false );}
    };
 
    function readFile(){
        var file = this.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
        if(!/image\/\w+/.test(file.type)){
            $.messager.alert("温馨提示","请确保文件为图像类型","error");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
 
        reader.onload = function(e){
            //将编码后的图片字符串放在输入框中
    result.value=this.result;
    //显示出显示图片
    $("#tp img").attr("src", this.result);
    // result.innerHTML = this.result;
    //图片弹出框显示图片
    img_area.innerHTML = '<img style="width: 100px;height: 100px" src="'+this.result+'" alt=""/>';
        }
    }
    //图片显示
    function img(){
        var hmc=$("#hmc");
        var title="图片显示"
        showSimpleDialog(hmc,title,'auto','auto');
    } 
</script>

　　在前台将图片转为base64编码字符串放在textarea 中，只需将该字符串传到后台进行保存到数据库，当然需要在页面显示的时候，也只需获取到该字符串放在img的src的值中。即可让图片显示出来

　　其中data.dkwzt就是从数据库获取的base64编码字符串

carcarrot

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
js将图片转为base64编码，以字符串传到后台存入数据库

（前台在中approve_edit.html中，后台不变）链接参考：http://www.cnblogs.com/Strom-HYL/p/6782176.html该链接文中并没有用到easyUI的相关样式，也没有将图片的缩略图展示出来现用一个新建页面进行显示，先看一下效果图：HTML：<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type"
复制链接

扫一扫