您现在的位置是:首页 >技术点滴> PHP 网站首页PHP
TP5结合Webuploder实现多图上传
- PHP
- 2019-08-22
- 924 次阅读
- 0
- 原创
TP5结合Webuploder实现多图上传
首先需要先下载Webuploader.
webuploader初始化
<!--引入css--> <link href="{__ADMIN_PATH}css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> <link href="{__ADMIN_PATH}css/animate.css" rel="stylesheet"> <link href="{__ADMIN_PATH}css/font-awesome.css?v=4.4.0" rel="stylesheet"> <script src="{__ADMIN_PATH}js/bootstrap.min.js?v=3.3.6"></script> <link rel="stylesheet" type="text/css" href="{__PLUG_PATH}webuploader/webuploader.css"> <link rel="stylesheet" type="text/css" href="{__ADMIN_PATH}css/webuploader-demo.css">
!-- Web Uploader 引入你的webupload --> <script type="text/javascript"> var ul="{__PLUG_PATH}"; // 添加全局站点信息 var BASE_URL = ul+'webuploader'; //webupload 地址 var up_load="{:url('admin/common/Webploader')}" //图片上传地址 var val_id="imageurl"; //存储上传图片的ID </script> <script src="{__PLUG_PATH}webuploader/webuploader.min.js"></script> <script src="{__ADMIN_PATH}js/webuploader-demo.js"></script>
webuploader-demo的css和js下载:(需要下载这两个文件引入到页面)
页面html代码
<div class="col-sm-12"> <div class="ibox float-e-margins"> <div class="ibox-content"> <div class="page-container"> <div id="uploader" class="wu-example"> <input type="hidden" id="{$imageurl}" name="{$name}" class="layui-input" lay-verify="{$verify}" lay-reqText="请先上传图片" style="width: 100%"> <!--存放图片路径--> <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker"></div> <p>或将照片拖到这里,单次最多可选300张</p> </div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> <div class="info"></div> <div class="btns"> <div id="filePicker2"></div> <div class="uploadBtn">开始上传</div> </div> </div> </div> </div> </div> </div> </div>
图片上传代码
/** * @return string * webuploader 上传图片 */ public function imgupload() { $file = request()->file('file'); // 移动到框架应用根目录/public/uploads/ 目录下 $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads'.DS.'images'); if($info){ // 成功上传后 获取上传信息 // 输出 jpg $data['path']=str_replace('\\',"/","/uploads/".$info->getSaveName()); return json_encode($data['path']);//把路径ajax用json方式返回到视图中 }else{ // 上传失败获取错误信息 echo $file->getError(); } }
效果图
转载: 感谢您对【phper】网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处【来源 phper: http://www.birdeyes.cn/article/29/9.html】。
上一篇: 常用php的一些数组操作
下一篇: Thinkphp5上传缩略图