本篇内容介绍了“thinkphp5怎么加layui实现图片上传功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
网站中很多表单都会用到上传图片,logo,照片,用户也会上传图片,这个时候网站就需要一个上传图片的功能,而且在上传后希望能预览一下看上传的对不对。
thinkphp5加layui实现图片上传功能(带图片预览)思路,异步传输图片并预览,将异步上传后的值返回表单隐藏域再提交。
首先,要引入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>
<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"></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>
<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>
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实现图片上传功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。