当前位置:网站首页>php不让图片跟数据一起上传(不再是先上传图片再上传数据)
php不让图片跟数据一起上传(不再是先上传图片再上传数据)
2022-06-26 08:50:00 【因起名而头秃】
使用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)
}
})
这样就完成了
边栏推荐
- Phpcms applet plug-in tutorial website officially launched
- Practice is the fastest way to become a network engineer
- 《一周搞定模电》—电源电路
- 【C】 Frog jumping steps and Hanoi Tower problem (recursion)
- Yolov5 advanced 4 train your own data set
- Some commands for remote work
- Talk about the development of type-C interface
- Phpcms V9 mobile phone access computer station one-to-one jump to the corresponding mobile phone station page plug-in
- How to compile builds
- Principe et application du micro - ordinateur à puce unique - Aperçu
猜你喜欢

Adding confidence threshold for demo visualization in detectron2

Self learning neural network series - 8 feedforward neural networks
![[cloud primordial | kubernetes chapter] go deep into the foundation of all things - container (V)](/img/67/26508edc451139cd0f4c9511ca1ed2.png)
[cloud primordial | kubernetes chapter] go deep into the foundation of all things - container (V)

External sorting and heap size knowledge

Regular expression

Graduation thesis management system based on SSM

phpcms v9商城模块(修复自带支付宝接口bug)

20220623 getting started with Adobe Illustrator

《一周搞定数电》-逻辑门

Tutorial 1:hello behavioc
随机推荐
Self taught programming series - 2 file path and text reading and writing
Bug encountered in training detectron2: the test set cannot be evaluated during training
ThreadLocal
什么是乐观锁,什么是悲观锁
Docker install redis
PD快充磁吸移动电源方案
commonJS和ES6模块化的区别
Computer mall based on SSM
Self taught machine learning series - 1 basic framework of machine learning
Construction and verification of mongodb sharding environment (redis final assignment)
phpcms小程序接口新增万能接口get_diy.php
Notes on setting qccheckbox style
Modify coco evaluation index maxdets=[10,15,20]
Yolov5 advanced 4 train your own data set
How to use the least money to quickly open the Taobao traffic portal?
Principe et application du micro - ordinateur à puce unique - Aperçu
[300+ continuous sharing of selected interview questions from large manufacturers] column on interview questions of big data operation and maintenance (I)
How to handle the small program tabbar that does not support parameter transfer
Yolov5 advanced camera real-time acquisition and recognition
Phpcms applet plug-in tutorial website officially launched