网站中很多表单都会用到上传图片，logo，照片，用户也会上传图片，这个时候网站就需要一个上传图片的功能，而且在上传后希望能预览一下看上传的对不对。
thinkphp5加layui实现图片上传功能（带图片预览）思路，异步传输图片并预览，将异步上传后的值返回表单隐藏域再提交。
1、引入文件
首先，要引入jQuery文件，这是必须的
1
<link><script></script>
2、HTML部分
1
3、功能实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script>
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、后台处理
图片上传1
2
3
4
5
6
7
8
9
10
11
12
13
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)));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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=>保存成功)));
}
