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" 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编码字符串

js将图片转为base64编码，以字符串传到后台存入数据库的更多相关文章

[转]JS将图片转为base64编码
本文转自:https://blog.csdn.net/DeMonliuhui/article/details/79731359 1.根据img标签获取base64编码/** * * @param im ...
将图片转换为Base64编码的字符串
图片以文件的形式存在,可以在表单中使用. 也可以转换成Base64编码的字符串,从而在css.js中以字符串的形式使用图片.例如,在css中设置背景图片.在js中用ajax上传图片. <!DOC ...
JS 获取图片的base64编码
获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
使用JS将图片转为Base64
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
html5 图片转为base64格式异步上传
因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...
Asp.net将图片转为Base64编码
protected void Page_Load(object sender, EventArgs e) { Image img = new Bitmap(Server.MapPath("/ ...
python将图片转为base64编码
import base64 f = open("m1.jpg", "rb") res = f.read() s = base64.b64encode(res) ...
JS将图片转为base64
var getDataFromImg = function(img) { var canvas = document.createElement('canvas'); var context = ca ...
base64编码的字符串与图片相互转换
#region 图片转为base64编码的字符串---ImgToBase64String /// <summary> /// 图片转为base64编码的字符串 /// </summa ...

随机推荐

Queries for Number of Palindromes(求任意子列的回文数)
H. Queries for Number of Palindromes time limit per test 5 seconds memory limit per test 256 megabyt ...
UIPageViewController 翻页、新手引导--UIScrollView:pagingEnabled
UIPageViewController 翻页.新手引导--UIScrollView:pagingEnabled
Java基础(七)--Exception异常处理
发现错误的理想时机是程序运行之前(编译期),然后不太现实,很多异常无法被发现(特别是业务上的数据),需要在运行时解决. 错误恢复机制保证代码健壮性的方式,异常处理在程序中很常见,也是必须的,必须考虑有 ...
Java笔记——String、StringBuffer和StringBuilder类
String类是不可变类,即一旦一个String对象被创建以后,包含在这个对象中的字符串序列是不可改变的,直至这个对象被销毁. StringBuffer对象则代表一个字符序列可变的字符串,当一个S ...
The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: [C:\Program Files\Java\jdk1.8.0_60\bin;C:\Windows\Sun\Jav
启动项目自动结束,查看日志发现 [ost-startStop-1] o.a.catalina.core.AprLifecycleListener : The APR based Apache To ...
kubeadmin 安装k8s集群
系统设置 CentOS Linux release 7.6.1810 (Core) 修改主机名 vim /etc/hostname k8s-master hostname -F /etc/hostna ...
08css、JS
08.css.JS-2018/07/18 1.css的属性文字属性:font-size:大小,font-family字体类型,font-color:颜色文本颜色:color:颜色,test-dec ...
洛谷——P1594 护卫队
P1594 护卫队题目描述护卫车队在一条单行的街道前排成一队,前面河上是一座单行的桥.因为街道是一条单行道,所以任何车辆都不能超车.桥能承受一个给定的最大承载量.为了控制桥上的交通,桥两边各站一个 ...
outflow Boundary Condition in FLuent
assumption: flow is imcompressible, fully developed, $\partial \phi / \partial X =0$, where is X is ...
洛谷 3178 [HAOI2015]树上操作
[题解] 就是个树链剖分的模板题. #include<cstdio> #include<algorithm> #include<cstring> #define L ...

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

js将图片转为base64编码，以字符串传到后台存入数据库的更多相关文章

随机推荐

热门专题