thinkphp5怎么加layui实现图片上传功能
网站中很多表单都会用到上传图片，logo，照片，用户也会上传图片，这个时候网站就需要一个上传图片的功能，而且在上传后希望能预览一下看上传的对不对。
thinkphp5加layui实现图片上传功能（带图片预览）思路，异步传输图片并预览，将异步上传后的值返回表单隐藏域再提交。
1、引入文件首先，要引入jQuery文件，这是必须的
<link rel="
stylesheet"
type="
text/css"
href="
__STATIC__/plugins/layui/css/layui.css"
rel="
external nofollow"
>
<
script type="
text/javascript"
src="
__STATIC__/plugins/layui/layui.js"
>
<
/script>
2、HTML部分<
form class="
layui-form"
>
<
div class="
layui-input-inline"
>
<
button class="
layui-btn layui-btn-sm"
onclick="
return false;
"
id="
upload_img"
>
<
i class="
layui-icon"
>
&
#xe67c;
<
/i>
上传图片<
/button>
<
img id="
pre_img"
<
?php if($data['
item'
]['
img'
]){echo '
src="
'
.$data['
item'
]['
img'
].'
"
'
;
}?>
/>
<
input type="
hidden"
name="
img"
value="
{$data.item.img}"
>
<
/div>
<
div class="
layui-form-item"
>
<
div class="
layui-input-block"
>
<
button class="
layui-btn"
onclick="
save()"
>
保存<
/button>
<
/div>
<
/div>
<
/form>
3、功能实现<
script type="
text/javascript"
>
layui.use(['
form'
,'
layer'
,'
upload'
],function(){
$ = layui.jquery;
var form = layui.form;
layer = layui.layer;
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '
#upload_img'
//绑定元素
,url: '
/admins.php/admins/video/upload_img'
//上传接口
,accept:'
images'
,done: function(res){
//上传完毕回调
$('
#pre_img'
).attr('
src'
,res.msg);
$('
input[name="
img"
]'
).val(res.msg);
}
,error: function(){
//请求异常回调
}
});
});
// 保存
function save(){
var title = $.trim($('
input[name="
title"
]'
).val());
var url = $.trim($('
input[name="
url"
]'
).val());
if(title == '
'
){
layer.msg('
请输入影片名称'
,{'
icon'
:2,'
anim'
:6});
return;
}
if(url == '
'
){
layer.msg('
请输入影片地址'
,{'
icon'
:2,'
anim'
:6});
return;
}
$.post('
/admins.php/admins/video/save'
,$('
form'
).serialize(),function(res){
if(res.code>
0){
layer.msg(res.msg,{'
icon'
:2,'
anim'
:2});
}else{
layer.msg(res.msg,{'
icon'
:1});
setTimeout(function(){parent.window.location.reload();
},1000);
}
},'
json'
);
}
<
/script>
4、后台处理图片上传public function upload_img(){
$file = request()->
file('
file'
);
if($file==null){
exit(json_encode(array('
code'
=>
1,'
msg'
=>
'
没有文件上传'
)));
}
$info = $file->
move(ROOT_PATH.'
public'
.DS.'
uploads'
);
$ext = ($info->
getExtension());
if(!in_array($ext,array('
jpg'
,'
jpeg'
,'
gif'
,'
png'
))){
exit(json_encode(array('
code'
=>
1,'
msg'
=>
'
文件格式不支持'
)));
}
$img = '
/uploads/'
.$info->
getSaveName();
exit(json_encode(array('
code'
=>
0,'
msg'
=>
$img)));
} 保存内容public function save(){
$id = (int)input('
post.id'
);
$data['
title'
] = trim(input('
post.title'
));
$data['
channel_id'
] = (int)input('
post.channel_id'
);
$data['
charge_id'
] = (int)input('
post.charge_id'
);
$data['
area_id'
] = (int)input('
post.area_id'
);
$data['
img'
] = trim(input('
post.img'
));
$data['
url'
] = trim(input('
post.url'
));
$data['
keywords'
] = trim(input('
post.keywords'
));
$data['
desc'
] = trim(input('
post.desc'
));
$data['
status'
] = (int)input('
post.status'
);
if($data['
title'
] == '
'
){
exit(json_encode(array('
code'
=>
1,'
msg'
=>
'
影片名称不能为空'
)));
}
if($data['
url'
] == '
'
){
exit(json_encode(array('
code'
=>
1,'
msg'
=>
'
影片地址不能为空'
)));
}
if($id){
$this->
db->
table('
video'
)->
where(array('
id'
=>
$id))->
update($data);
}else{
$data['
add_time'
] = time();
$this->
db->
table('
video'
)->
insert($data);
}
exit(json_encode(array('
code'
=>
0,'
msg'
=>
'
保存成功'
)));
}
随着新媒体时代的到来，作为一种内容呈现工具，图片扮演着极为重要的角色。然而，如何实现图片上传的功能却是摆在很多开发者面前的问题。本文将介绍如何使用ThinkPHP5与Layui实现图片上传的功能。
一、Layui和ThinkPHP5的集成
Layui是一款高效的前端UI框架，而ThinkPHP5则是一个成熟的后端框架。在使用前，需要先将Layui导入到项目中，并在ThinkPHP5中配置相关参数。以前端与后端分离为例，在前端html中加上代码
```
```
在后端的配置文件config.php中加上
```
'view_replace_str' => [
'layui_css' => '/layui/css/',
'layui_js' => '/layui/layui.js'
]
```
二、前端页面UI设计
在前端页面中使用Layui的上传组件实现图片上传的功能。在html中加上代码
```
```
其中的“#test”是自定义按钮的id，“#demo1”是展示上传成功后图片的标签id，“#demoText”是展示上传信息的标签id。
三、前端页面事件监听
需要在前端页面中监听按钮的点击事件，以及图片上传完成后的回调函数。这里使用Layui内置的upload模块完成事件监听。在javascript中加上代码
```
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test', //绑定元素
url: '/upload/', //上传接口
done: function(res){
//上传完毕回调
$('#demo1').attr('src', res.data.src); //将上传成功后的图片显示出来
},
error: function(){
//请求异常回调
}
});
});
```
四、后端控制器代码
在ThinkPHP5的控制器中，需要写出上传图片的接口。在controller文件夹下新建Upload.php文件，添加代码
```
public function upload(){
$file = request()->file('image');
// 将图片存储到本地
$info = $file->move('uploads/');
if($info){
// 获取上传后的文件名
$result['data']['src'] = 'uploads/' . $info->getSaveName();
$result['msg'] = '上传成功';
$result['code'] = 1;
}else{
$result['msg'] = '上传失败';
$result['code'] = 0;
}
return json_encode($result);
}
```
这里使用request()函数获取前端通过POST方式传递过来的文件对象，再使用move()函数将图片移动到指定的路径。
五、前端页面样式调整
在Layui中，上传组件的样式可以通过添加CSS样式来实现。在html中加上代码
```
```
这里使用了margin、width、height等属性，实现样式上的调整。
六、防止上传非图片文件
为了防止上传非图片文件，可以在后端上传接口中加入判断文件类型的代码。修改控制器代码
```
public function upload(){
$file = request()->file('image');
// 判断文件类型是否为图片
if(!in_array($file->getMime(), ['image/jpeg', 'image/png', 'image/gif'])){
$result['msg'] = '请上传图片';
$result['code'] = 0;
return json_encode($result);
}
// 将图片存储到本地
$info = $file->move('uploads/');
if($info){
// 获取上传后的文件名
$result['data']['src'] = 'uploads/' . $info->getSaveName();
$result['msg'] = '上传成功';
$result['code'] = 1;
}else{
$result['msg'] = '上传失败';
$result['code'] = 0;
}
return json_encode($result);
}
```
七、完整代码展示
前端html代码:
```
```
前端javascript代码:
```
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test', //绑定元素
url: '/upload/', //上传接口
done: function(res){
//上传完毕回调
$('#demo1').attr('src', res.data.src); //将上传成功后的图片显示出来
},
error: function(){
//请求异常回调
}
});
});
```
后端控制器代码:
```
public function upload(){
$file = request()->file('image');
// 判断文件类型是否为图片
if(!in_array($file->getMime(), ['image/jpeg', 'image/png', 'image/gif'])){
$result['msg'] = '请上传图片';
$result['code'] = 0;
return json_encode($result);
}
// 将图片存储到本地
$info = $file->move('uploads/');
if($info){
// 获取上传后的文件名
$result['data']['src'] = 'uploads/' . $info->getSaveName();
$result['msg'] = '上传成功';
$result['code'] = 1;
}else{
$result['msg'] = '上传失败';
$result['code'] = 0;
}
return json_encode($result);
}
```
然后添加CSS样式即可实现图片上传功能。
本文主要介绍了使用ThinkPHP5和Layui实现前后端分离的图片上传功能，使开发者们能够方便地处理相关需求。同时，还介绍了相应的前端页面事件监听、后端控制器代码、样式调整以及防止上传非图片文件等细节问题。希望对大家有所帮助！
