码迷,mamicode.com
首页 > Web开发 > 详细

layui编辑器(layedit)的实现和图片上传功能

时间:2020-03-03 14:44:37      阅读:534      评论:0      收藏:0      [点我收藏+]

标签:上传图片   dem   技术   表示   route   lan   upload   开始   提示   

官方文档入口:https://www.layui.com/doc/modules/layedit.html#uploadImage

先看效果图片:

技术图片

 

开始上代码了 前端代码

1 <div class="layui-input-block">
2     <textarea id="demo" style="display: none;"></textarea>
3 </div>

js代码

 1 layui.use(‘layedit‘, function(){
 2     var layedit = layui.layedit;
 3     layedit.set({
 4         uploadImage: {  //上传图片的设置
 5             url: ‘{{route(‘admin_upload_layui_img‘)}}‘ //接口url
 6            ,type: ‘post‘ //默认post
 7         }
 8     });
 9      layedit.build(‘demo‘);  //建立编辑器
10 });

php后台上传图片的接口

 1     /**
 2      *  layui上传图片 上传到本地服务器
 3      *  hinq 2020 03 03
 4      *
 5      */
 6     public function uploadLayuiImg()
 7     {
 8         if ($_FILES["file"]["error"] == 0) {
 9             //这里是上传图片处理代码 网上有跟多 我就不写注释了
10             $fileUrl = ‘upload/imgs‘;
11             $dir = iconv("UTF-8", "GBK", $fileUrl);
12             if (!file_exists($dir)) {
13                 mkdir($dir, 777, true);
14             }
15             $suffix = ‘.‘ . pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);
16             $picUrl = $fileUrl . ‘/‘ . self::GetRandStr() . $suffix;
17             move_uploaded_file($_FILES["file"]["tmp_name"], $picUrl);
18 
19             //返回参数是官网规定的格式
20             $data = [
21                 "code"=> 0 //0表示成功,其它失败
22                 ,"msg"=> "" //提示信息 //一般上传失败后返回
23                 ,"data"=> [
24                     "src"=> $picUrl
25                     ,"title"=> $_FILES["file"]["name"] //可选
26                 ]
27             ];
28             echo json_encode( $data );
29         } else {
30             echo json_encode([‘code‘ => ‘1‘, ‘url‘ => ‘‘]);
31         }
32     }

 

到这里layui编辑器(layedit) + 上传图片的功能就好了

 

layui编辑器(layedit)的实现和图片上传功能

标签:上传图片   dem   技术   表示   route   lan   upload   开始   提示   

原文地址:https://www.cnblogs.com/hinq/p/12402045.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!