php layui 文件上传
layui官方网站:http://www.layui.com/
一个很好的前端框架,现在也出了后台模板(收费),值得我们学习和借鉴,非常感谢作者(贤心)的开源和维护。
一、下载layui部署到项目,在页面引入layui.css和layui.js。
二、html代码
<div class="layui-form-item"> <label class="layui-form-label">图片</label> <div class="layui-input-block"> <img id="pre_img" style="height: 30px;" /> <button class="layui-btn layui-btn-sm" onclick="return false;" id="upload_img"> <i class="layui-icon"></i>上传图片 </button> <input type="hidden" name="img" value=""> </div> </div>
三、js代码
layui.use(['upload','jquery'],function () { $ = layui.jquery; var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#upload_img' //绑定元素 ,url: '/api/Image/upload_file' //上传接口 ,accept:'images' ,done: function(res){ //上传完毕回调 $('#pre_img').attr('src',res.msg); $('input[name="img"]').val(res.msg); } ,error: function(){ //请求异常回调 } }); });
四、封装上传方法
public function upload_file() { $file = request()->file('file'); // 获取上传的文件 if ($file==null) { exit(json_encode(array('code'=>1, 'msg'=>'未上传图片'))); } // 获取文件后缀 $temp = explode(".", $_FILES["file"]["name"]); $extension = end($temp); // 判断文件是否合法 if(!in_array($extension, array("gif","jpeg","jpg","png"))){ exit(json_encode(array('code'=>1, 'msg'=>'上传图片不合法'))); } $info = $file->move(ROOT_PATH.'public'.DS.'uploads'); // 移动文件到指定目录 没有则创建 $img = '/uploads/'.$info->getSaveName(); exit(json_encode(array('code'=>0, 'msg'=>$img))); }
若文章对您有帮助,帮忙点个赞!
(微信扫码即可登录,无需注册)