layui+PHP文件上传

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)));}

layui+PHP文件上传相关推荐

后端：Layui实现文件上传功能
今天给大家分享采用AspNet MVC+前端框架LayUi实现文件上传功能,感兴趣的朋友可以学习一下. 文件上传实体(UploadFile.cs) public class UploadFile{pu ...
layui多文件上传讲解_Laravel 使用 layui 文件上传组件批量上传图片
摘要 Laravel 使用 layui 文件上传组件批量上传图片. layui是一款经典国产模块化前端UI框架,首先看看官方的介绍: layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI ...
Springboot + layui + FTP文件上传删除 + HTTP文件下载预览 + pdf.js文件预览（项目实战总结）
文件管理 0.需求及前言 1.前端,上传按钮嵌入数据表格中 2.利用IIS部署FTP文件服务器 3.后台FTP连接和文件操作 4.FTP遇到的问题和解决方案 5.预览PDF文件V1.0:FTP+临时文 ...
layui多文件上传讲解_Layui 多文件上传 SSH
jsp 页面 pageEncoding="UTF-8"%> Insert title here 选择多文件文件名大小状态操作开始上传 layui.use('upload' ...
layui多文件上传讲解_layui d多文件上传(示例代码)
借阅前端代码选择多文件图片大小状态操作不计在线删除开始上传 JS 代码 layui.use('upload', function(){ var upload = layui.upload; ...
C# 结合LayUI 进行文件上传和图片上传
1.方法处理类 namespace tools {/// <summary>/// 文件类型/// 文件扩展名类型/// </summary>public enum FileT ...
layui+strust2多文件上传
关于layui+strust2文件上传,action参数无需改变不论你上传多少个文件,当你把断点打在你的上传接口时,永远只会进入一次 !!!但是,如果你上传3个文件,日志输出会总共执行执行3次所以 ...
layui自定义模块、日志打印使用、layui文件上传云服务器
1.layui自定义模块:方便接口调用异步请求url地址不方便解决:扩展模块 1):定义对应js文件 ja>lay-module创建http目录创建http.js文件 2): ...
layui动态渲染上传文件功能点击选择文件没反应解决方案
layui动态渲染上传文件功能点击选择文件没反应解决方案场景动态加载出来的table表格如下表格问题点击选择多文件没有反应不弹出选择文件的弹框如果你和我是同样问题请向下继续看如果不同 ...

layui+PHP文件上传

layui+PHP文件上传相关推荐

最新文章

热门文章