使用jq实现功能
html做一个自己喜欢的按钮样式,并做一个input file作为上传对象
博主使用的是layui的上传按钮样式 给按钮和input添加上一个id
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-primary" id="sys_logo">
<i class="layui-icon"></i>上传图片
</button>
<input id="sys_logo_file" type="file" style="display: none;" name="sys_logo" value="{if !empty($applyinfo)}{$applyinfo['sys_logo']}{/if}" />
</div>
<img src="" id="slImg" />
jq代码
//触发上传事件
$('#sys_logo').click(function(){
return $('#sys_logo_file').click();
});
//监控input改变事件 上传后将图片处理成base64进行预览
$('#sys_logo_file').on('change', function (e) {
var reader = new FileReader()
reader.readAsDataURL( e.currentTarget.files[0])
// 获取base64
reader.onload = function() {
$('#slImg').attr('src',reader.result)
}
})
这样就完成了