thinkphp5加layui實(shí)現(xiàn)圖片上傳功能(帶圖片預(yù)覽)
網(wǎng)站中很多表單都會(huì)用到上傳圖片,logo,照片,用戶(hù)也會(huì)上傳圖片,這個(gè)時(shí)候網(wǎng)站就需要一個(gè)上傳圖片的功能,而且在上傳后希望能預(yù)覽一下看上傳的對(duì)不對(duì)。
thinkphp5加layui實(shí)現(xiàn)圖片上傳功能(帶圖片預(yù)覽)思路,異步傳輸圖片并預(yù)覽,將異步上傳后的值返回表單隱藏域再提交。
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"></i>上傳圖片</button>
<img id="pre_img" <?php if($data['item']['img']){echo 'src="'.$data['item']['img'].'"';}?> style="height: 30px;" />
<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、功能實(shí)現(xiàn)
<script type="text/javascript">
layui.use(['form','layer','upload'],function(){
$ = layui.jquery;
var form = layui.form;
layer = layui.layer;
var upload = layui.upload;
//執(zhí)行實(shí)例
var uploadInst = upload.render({
elem: '#upload_img' //綁定元素
,url: '/admins.php/admins/video/upload_img' //上傳接口
,accept:'images'
,done: function(res){
//上傳完畢回調(diào)
$('#pre_img').attr('src',res.msg);
$('input[name="img"]').val(res.msg);
}
,error: function(){
//請(qǐng)求異?;卣{(diào)
}
});
});
// 保存
function save(){
var title = $.trim($('input[name="title"]').val());
var url = $.trim($('input[name="url"]').val());
if(title == ''){
layer.msg('請(qǐng)輸入影片名稱(chēng)',{'icon':2,'anim':6});
return;
}
if(url == ''){
layer.msg('請(qǐng)輸入影片地址',{'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、后臺(tái)處理
圖片上傳
public function upload_img(){
$file = request()->file('file');
if($file==null){
exit(json_encode(array('code'=>1,'msg'=>'沒(méi)有文件上傳')));
}
$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)));
}保存內(nèi)容
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'=>'影片名稱(chēng)不能為空')));
}
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'=>'保存成功')));
}到此這篇關(guān)于thinkphp5加layui實(shí)現(xiàn)圖片上傳功能(帶圖片預(yù)覽)的文章就介紹到這了,更多相關(guān)thinkphp+layui圖片上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
php中PDO方式實(shí)現(xiàn)數(shù)據(jù)庫(kù)的增刪改查
PDO是mysql數(shù)據(jù)庫(kù)操作的一個(gè)公用類(lèi)了,我們不需要進(jìn)行自定類(lèi)就可以直接使用pdo來(lái)操作數(shù)據(jù)庫(kù)了,但是在php默認(rèn)配置中pdo是未開(kāi)啟所以我們必須先在php.ini中開(kāi)啟它才可以使用。2015-05-05
php根據(jù)isbn書(shū)號(hào)查詢(xún)amazon網(wǎng)站上的圖書(shū)信息的示例
這篇文章主要介紹了php根據(jù)isbn書(shū)號(hào)查詢(xún)amazon網(wǎng)站上的圖書(shū)信息的示例,需要的朋友可以參考下2014-02-02
php獲取qq用戶(hù)昵稱(chēng)和在線(xiàn)狀態(tài)(實(shí)例分析)
獲取qq在線(xiàn)狀態(tài)官方已有API提供了,我們用另一種方法獲取qq用戶(hù)昵稱(chēng)和在線(xiàn)狀態(tài),主要是為學(xué)習(xí)PHP。2013-10-10
PHP 7.4 新語(yǔ)法之箭頭函數(shù)實(shí)例詳解
短閉包,也叫做箭頭函數(shù),是一種用 php 編寫(xiě)的短函數(shù).這篇文章主要介紹了PHP 7.4 新語(yǔ)法之箭頭函數(shù),需要的朋友可以參考下2019-05-05
laravel中Redis隊(duì)列監(jiān)聽(tīng)中斷的分析
這篇文章主要給大家介紹了關(guān)于laravel中Redis隊(duì)列監(jiān)聽(tīng)中斷的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
PHP如何實(shí)現(xiàn)阿里云短信sdk靈活應(yīng)用在項(xiàng)目中的方法
這篇文章主要介紹了PHP如何實(shí)現(xiàn)阿里云短信sdk靈活應(yīng)用在項(xiàng)目中的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06

