本文实例讲述了TP5框架实现一次选择多张图片并预览的方法。分享给大家供大家参考,具体如下:
点击选择图片(可选多张),确定后将选择的图片显示在页面上,已经选择的图片也可以删除,点击提交将图片提交给后台。
1、效果图
2、code
用input标签并选择type=file,记得带上multiple,不然就只能单选图片了
如果不想通过 ajax 提交,一定要加上文件传输协议 ( enctype="multipart/form-data" )
view
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>showImages</title> <style type="text/css"> .float{ float:left; width : 200px; height: 200px; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 10px; padding: 5px; margin: 5px; } img{ position: relative; } .result{ width: 200px; height: 200px; text-align: center; box-sizing: border-box; } #file_input{ display: none; } .delete{ width: 200px; height:200px; position: absolute; text-align: center; line-height: 200px; z-index: 10; font-size: 30px; background-color: rgba(255,255,255,0.8); color: #777; opacity: 0; transition-duration: :0.7s; -webkit-transition-duration: 0.7s; } .delete:hover{ cursor: pointer; opacity: 1; } </style> <script src="/UploadFiles/2021-04-02/jquery.min.js">controller
$image=request()->file('image'); print_r($image);3、over!!!
更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。
希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。
标签:
TP5,选择多张图片,预览
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“TP5框架实现一次选择多张图片并预览的方法示例”评论...