PHP配合layUI实现图片上传实例

一、下载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" οnclick="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_img' //上传接口
,accept:'images'
,done: function(res){
//上传完毕回调
$('#pre_img').attr('src',res.msg);
$('input[name="img"]').val(res.msg);
}
,error: function(){
//请求异常回调
}
});
});
四、封装上传方法(TP5上传文件类可以根据实际项目调整，只需要到时候返回图片的路径即可)

public function upload_img(){
$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)));
}

有疑问的可以给我留言啊；欢迎留言和互动

PHP配合layUI实现图片上传实例相关推荐

ThinkPHP5整合LayUI编辑器图片上传
2019独角兽企业重金招聘Python工程师标准>>> 一.创建上传方法 public function uploadimg(){$image = $_FILES['file'];$ ...
php 多图上传编辑器,ThinkPHP5整合LayUI编辑器图片上传
一.创建上传方法 public function uploadimg() { $image = $_FILES['file']; $filebase = file_get_contents($imag ...
.net mvc + layui做图片上传（二）—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
WebUploader图片上传实例
webuploader-1.1.5 图片上传实例本插件基于 webuploader插件进行了封装,提供了三种常用视图,并对常用上传功能进行了JS封装,视图,样式,业务逻辑都已封装(JS),可以直接 ...
PHP+webupload身份证正面反面图片上传实例
PHP+webupload实现身份证正面反面图片上传实例,其实原理很简单,就是固定上传两张图片,具体看下面的源代码自定义两个上传按钮 <div class="upload-image ...
layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...
layui：图片上传
Layui文件上传 layui官网:https://www.layui.com/ layui插件下载官方文档(关于文件上传) 快速入门前端 1. index页面,引入css样式和js脚本 < ...
c ajax 上传图片,ajax +NodeJS 实现图片上传实例
前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note( ...
.Net之Layui多图片上传
前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...

PHP配合layUI实现图片上传实例

PHP配合layUI实现图片上传实例相关推荐

最新文章

热门文章