layui 富文本图片上传接口与普通按钮 文件上传接

富文本-图片上传

html:

<div> <div> <!--<textarea required lay-verify="required" placeholder="详细描述"></textarea>--> <textarea placeholder="详细描述"></textarea> </div> </div>

js:记得之前引入layui.js

<script> layui.use('layedit', function(){ var layedit = layui.layedit; layedit.set({ uploadImage: { url: '{:url("index/index/lay_img_upload")}', //接口url type: 'post' //默认post } }); layedit.build('L_content'); //建立编辑器 }); </script>

tp:

// 图片上传接口 public function lay_img_upload() { $file = Request::instance()->file('file'); if(empty($file)){ $result["code"] = "1"; $result["msg"] = "请选择图片"; $result['data']["src"] = ''; }else{ // 移动到框架应用根目录/public/uploads/ 目录下 $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/layui' ); if($info){ $infos = $info->getInfo(); // 源文件名 $name = $infos['name']; $name_path =str_replace('\\',"https://www.jb51.net/",$info->getSaveName()); //成功上传后 获取上传信息 $result["code"] = '0'; $result["msg"] = "上传成功"; $result['data']["src"] = "/forum/public/uploads/layui/".$name_path; $result['data']["title"] = $name; }else{ // 上传失败获取错误信息 $result["code"] = "2"; $result["msg"] = "上传出错"; $result['data']["src"] =''; } } return json_encode($result); }

普通点击button 文件上传

html :

<div> <div> <div> <p>建议尺寸168*168,支持jpg、png、gif,最大不能超过50KB</p> <input type="hidden" value="${ui.userImage }" required lay-verify="required" /> <!--<button type="button">--> <button type="button"> <i></i>上传头像 </button> <img src="https://www.jb51.net/{$user.profile_img}"> <span></span> </div> </div> </div>

js :

layui.use('upload',function(){ var upload = layui.upload; upload.render({ elem: '#fileBtn'//绑定元素 ,url: "{:url('index/personal/modifyImg')}" //上传接口 ,accept: 'images' ,auto: true //属性详见 // ,bindAction: '#uploadBtn' ,done: function(res){ alert(res.data.src); $("[name=userImage]").val(res.data.src); } }); });

tp:

public function modifyImg() { $file = Request::instance()->file('file'); if(empty($file)){ $result["code"] = "1"; $result["msg"] = "请选择图片"; $result['data']["src"] = ''; }else{ // 移动到框架应用根目录/public/uploads/ 目录下 $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/user' ); if($info){ $infos = $info->getInfo(); // 源文件名 $name = $infos['name']; $name_path =str_replace('\\',"https://www.jb51.net/",$info->getSaveName()); //成功上传后 获取上传信息 $result["code"] = '0'; $result["msg"] = "上传成功"; $result['data']["src"] = "/forum/public/uploads/user/".$name_path; $result['data']["title"] = $name; }else{ // 上传失败获取错误信息 $result["code"] = "2"; $result["msg"] = "上传出错"; $result['data']["src"] =''; } } return json_encode($result); }

以上这篇layui 富文本图片上传接口与普通按钮 文件上传接口的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/8f366c7ebcb2e0a21a259c55fe0ac249.html