php不让图片跟数据一起上传(不再是先上传图片再上传数据)

使用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">&#xe67c;</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)
            }
        })

这样就完成了

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值