1.htm页面:
<div class="image-wrapper">
<p class="label">上传照片</p>
<div class="image-input">
<div class="img-preview">
<#if formbean.image??>
<img alt="" class="wh60" src="data:image/png;base64,${formbean.image}"> //图片显示
<input type="hidden" name="image" value="${formbean.image}" /> //图片隐藏域,在编辑情况下,如不修改可直接提交。
</#if>
</div>
<div class="img-button-wrapper">
<input type="file" id="img-file" accept="image/*" capture="camera"/> //图片的选择、拍摄
<a class="photo-button"><i class="icon icon-camera"></i></a> //拍照按钮
</div>
</div>
</div>
2.导入js文件
<script src="http://tp.auto373.cn/source/plugin/hejin_toupiao/js/exif.js" type="text/javascript"></script>
<script src="http://tp.auto373.cn/source/plugin/hejin_toupiao/js/binaryajax.js" type="text/javascript"></script>
<script src="http://tp.auto373.cn/source/plugin/hejin_toupiao/js/localResizeIMG2.js" type="text/javascript"></script>
<script src="http://tp.auto373.cn/source/plugin/hejin_toupiao/js/mobileBUGFix.mini.js" type="text/javascript"></script>
3.图片改为base64代码
$('#img-file').localResizeIMG({
width : 1024,
quality : 0.8,
success : function(result) {
var str = '<img class="wh60" src="' + result.base64 + '"/><input type="hidden" name="image" value="' + result.clearBase64 + '"/>';
$(".img-preview").html(str);
}
});
4.后台:直接setter/getter即可。