图片上传(非附件)

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即可。


     

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值