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

随机推荐

Java 8 和 Java 9部分区别
Java 8 和 Java 9中 concurrent 包有了一些改变, 本文对这些改变做了汇总.Java 8 中 Concurrent package的改变java.util.concurrent中 ...
C++ map使用总结
0. Backgroud 此文章源于博主(sunshinewave),转到自己博客以后方便查看 map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次, ...
idea14远程调试linux下的tomcat
进入到idea的tomcat的run/debug配置,新建个remote tomcat,然后填写相关信息,如上图(注意远程调试端口). 再选择Startup/Connection,如下图所示: 到此, ...
python爬取酷狗音乐排行榜
本文为大家分享了python爬取酷狗音乐排行榜的具体代码,供大家参考,具体内容如下
python之cookbook-day02
第一章:数据结构和算法 1.2 解压可迭代对象赋值给多个变量问题: 如果一个可迭代对象的元素个数超过变量个数时,会抛出一个 ValueError .那么怎样才能从这个可迭代对象中解压出 N 个元素 ...
IDLE in Python (Ubuntu)
To lauch IDLE in the Current Woking Directory >>> usr/bin/idle3 Alt + n # next command Alt ...
this与const
在普通非const成员函数中,this是const指针,而在const成员函数中,this是const对象的const指针. class Foo { Foo& get_self1(void) ...
阻塞套接字返回EAGAIN
今天用NDK写了一个通信程序,发现阻塞SOKCET 读写的时候返回了EAGAIN.NDK下PERROR输出为Try Again.查了半天头文件在网上找到了原因.在此纪录.网址为http://blog ...
java 访问对象私有变量
Captcha captcha = getCaptcha(captchaId); // 通过反射获取验证码值 Class<?> classType = captcha.getClass() ...
__repr__()
class A : def __init__(self,name): self.name=name #def __str__(self): # return '**%s**'%self.name de ...

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

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

随机推荐

热门专题