（前台在
中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編碼字符串