thinkphp5.1+layui图片上传(前端部分.第一种)
2021/5/5 14:25:32
本文主要是介绍thinkphp5.1+layui图片上传(前端部分.第一种),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前台展示(已开启自动上传,图片拖拽到框内或点击框后选择图片即可自动上传)
前端(亲测可用)
<div class="layui-form-item"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>消毒照片上传</legend> </fieldset> <div class="layui-row"> <div class="layui-col-xs7"> <div class="layui-upload-drag" id="test10" style="max-width: 60px;max-height:60px;margin-left:30px;"> <div class="layui-row"> <div class="layui-col-xs7"> <i class="layui-icon"></i> <div style="font-size: 1px;width: 75px;margin-right:-10px;text-align: left;">点击上传,或将文件拖到这</div> </div> <div class="layui-col-xs5"> <div class="layui-hide" id="uploadDemoView" style="margin-left:80px;"> <hr> <img src="" alt="上传成功后渲染" style="max-width: 60px;max-height:60px;"> </div> </div> </div> </div> </div> <div class="layui-col-xs5"> <label class="layui-form-label" style="width:60px;margin-left:-30px;display:none;" >图片名称</label> <div class="layui-input-inline" style="visibility:hidden;"><input type="text" id="picname" name="picname" autocomplete="off" class="layui-input" ></div> </div> </div> <div class="layui-row"> <div class="layui-col-xs12"> <div style="margin-left:30px;margin-top:7px;"> 温馨提示: 一次上传一张图,且大小不超过2MB。 </div> </div> </div> </div>
<script> layui.use(['form', 'upload'], function () { var upload = layui.upload; var $ = layui.jquery; var element = layui.element; var form = layui.form; //拖拽上传 upload.render({ elem: '#test10' //绑定元素 ,url: "" //接口地址 ,size: 2048 // 最大允许上传的文件大小 单位 KB ,done: function(res){ //返回状态值(不可少) if(.......){ //对返回的状态值code进行判断 layer.msg('上传成功'); var picname=res.filename; $("#picname").val(picname); layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', picname); return layer.msg('上传成功'); }else{ return layer.msg('上传失败'); } } }); }) </script>
(后端部分参照ThinkPHP5.1系列另一篇)
这篇关于thinkphp5.1+layui图片上传(前端部分.第一种)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-29env: php: no such file or directory
- 2024-03-01php foreach break
- 2024-02-26Exception参数 php-icode9专业技术文章分享
- 2023-12-30PHP文件批量上传-icode9专业技术文章分享
- 2023-12-30thinkphp6 withJoin-icode9专业技术文章分享
- 2023-12-27MagicArray:像php一样,让Go业务代码不再卷!
- 2023-11-18centos7编译安装PHP教程。
- 2023-11-18centos7编译安装phpMyAdmin教程。
- 2023-10-13唱衰这么多年,PHP 仍然还是你大爷!
- 2023-07-25PHP8,性能更好,语法更好,类型安全更完善