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 ...

随机推荐

HDU_1143_tri tiling
Tri Tiling Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
C语言编辑编译及集成开发环境
C语言编辑编译及集成开发环境编辑器在不同的操作系统上使用不同的编辑器,保存源代码文件时,文件名应指出程序的功能扩展名应为.c. 编译器编译器把源代码编译成机器语言的二进制指令即目标代码生成目标文 ...
使用Java中Calendar类测试当前年月日
import java.util.Calendar; public class time { public static void main(String[] args) { Calendar cal ...
Python学习-字符串函数操作2
字符串函数操作 find( sub, start=None, end=None):从左到右开始查找目标子序列,找到了结束查找返回下标值,没找到返回 -1 sub:需要查找的字符串 start=None ...
Python，socket编程
TCP协议 IP+端口应用层协议做的事不同,但都离不开数据的交换,本质上都是收和发~为什么要三次握手?目标机器可能不存在,握手期间,发送方也可能down掉.客户端————服务器,先发请求的那个是客户 ...
【Codeforces 923A】Primal Sport
[链接] 我是链接,点我呀:) [题意] 题意 [题解] 考虑怎么得到数字x2=N,假设是质数p的倍数那么x1肯定在x2-p+1~x2这个范围内才行因为p的倍数要刚好大于等于x1, 所以x1肯定是 ...
九度oj 题目1045：百鸡问题
题目1045:百鸡问题时间限制:1 秒内存限制:32 兆特殊判题:否提交:10418 解决:4559 题目描述: 用小于等于n元去买100只鸡,大鸡5元/只,小鸡3元/只,还有1/3元每只的一 ...
ace & web ide & web code editor
ace & web ide & web code editor web ide https://ace.c9.io/ https://github.com/ajaxorg/ace ht ...
noip模拟赛 whzzt-Confidence
分析:做着感觉像脑筋急转弯一样......因为空间的限制,存不下每一个数,所以用数学方法来解. 设t1=Σai - Σbi = aj - bj,t2=Σi*ai - Σi*bi = j*(aj - b ...
NIO基础学习——缓冲区
NIO是对I/O处理的进一步抽象,包含了I/O的基础概念.我是基于网上博友的博客和Ron Hitchens写的<JAVA NIO>来学习的. NIO的三大核心内容:缓冲区,通道,选择器. ...

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

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

随机推荐

热门专题