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">位 置 图</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">备 注</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 ...
随机推荐
- SQL SERVER 2008 在某表中新增一列时失败
背景:新增列语句如:“alter table 表名 add 列名 float default 0 with values”(用VS2010做网站,这句话是在C#代码里执行的) 报错提示: 警告: 已经 ...
- （转）版本管理工具介绍——SVN篇(一)
http://blog.csdn.net/yerenyuan_pku/article/details/72620101 SVN是何物 SVN是Subversion的简称,是一款集中式的开源版本控制系统 ...
- Spring框架系列(一)--Spring MVC基础知识
Web项目开发过程中一般都是使用MVC(Model-View-Controller)模式,早先的Struts2到Spring MVC,再到现在Spring Boot,都是相似的思 路.Spring B ...
- MS SQL Server查询 本日、本周、本月、本季度、本年起始时间
参数声明 declare @beginTime datetime, --查询开始时间 @endTime datetime, --查询结束时间 @queryTimeType tinyint; --查询时 ...
- xmpp聊天室(5)
聊天室 //初始化聊天室 XMPPJID *roomJID = [XMPPJID jidWithString:ROOM_JID]; xmppRoom = [[XMPPRoom alloc] initW ...
- 洛谷——P3369 【模板】普通平衡树（splay）（基础splay，维护一些神奇的东东）
P3369 [模板]普通平衡树 平衡树大法好,蒟蒻(博主)最近正在收集高级数据结构的碎片,企图合成数据结构的元素之力来使自己的RP++... 您需要写一种数据结构(可参考题目标题),来维护一些数,其中 ...
- 洛谷——P1516 青蛙的约会
P1516 青蛙的约会 题目描述 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件 ...
- 每日命令：（1）ls
ls命令是linux下最常用的命令.ls命令就是list的缩写缺省下ls用来打印出当前目录的清单如果ls指定其他目录那么就会显示指定目录里的文件及文件夹清单. 通过ls 命令不仅可以查看linu ...
- swoft| 源码解读系列二: 启动阶段, swoft 都干了些啥?
date: 2018-8-01 14:22:17title: swoft| 源码解读系列二: 启动阶段, swoft 都干了些啥?description: 阅读 sowft 框架源码, 了解 sowf ...
- buf.readIntBE()
buf.readIntBE(offset, byteLength[, noAssert]) buf.readIntLE(offset, byteLength[, noAssert]) offset { ...