ThinkPHP5+Layui實(shí)現(xiàn)圖片上傳加預(yù)覽功能
html代碼
<div class="layui-upload"> <button type="button" class="layui-btn" id="cover">上傳封面</button> </div> <div class="layui-input-inline"> <img id="preview" width="200px" height="200px"> </div>
js代碼
var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允許上傳的文件類型 ,auto:true // 自動(dòng)上傳 ,before:function (obj) { console.log(obj); // 預(yù)覽 obj.preview(function(index,file,result) { // console.log(file.name); //圖片名字 // console.log(file.type); //圖片格式 // console.log(file.size); //圖片大小 // console.log(result); //圖片地址 $('#preview').attr('src',result); //圖片鏈接 base64 }); // layer.load(); } // 上傳成功回調(diào) ,done:function(res) { // console.log(upload); console.log(res); } // 上傳失敗回調(diào) ,error:function(index,upload) { // 上傳失敗 } });
php接口
$file = request()->file('file'); // 移動(dòng)到框架應(yīng)用根目錄/public/uploads/ 目錄下 $info = $file->move('public/upload/'); if ($info) { $path = 'public/upload/'.$info->getSaveName(); return return_succ($path); }
總結(jié)
以上所述是小編給大家介紹的ThinkPHP5+Layui實(shí)現(xiàn)圖片上傳加預(yù)覽功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
利用laravel+ajax實(shí)現(xiàn)文件上傳功能方法示例
最近在做的項(xiàng)目基于Laravel開發(fā),需要用到Ajax上傳,查了些資料,自己整理了下可用的方法。下面這篇文章主要給大家介紹了關(guān)于利用laravel+ajax實(shí)現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-08-08thinkPHP5項(xiàng)目中實(shí)現(xiàn)QQ第三方登錄功能
這篇文章主要介紹了thinkPHP5項(xiàng)目中實(shí)現(xiàn)QQ第三方登錄功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了修改QQ登陸接口并整合進(jìn)thinkPHP5項(xiàng)目中的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-10-10laravel unique驗(yàn)證、確認(rèn)密碼confirmed驗(yàn)證以及密碼修改驗(yàn)證的方法
這篇文章主要介紹了laravel unique驗(yàn)證、確認(rèn)密碼confirmed驗(yàn)證以及密碼修改驗(yàn)證的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10首頁四格,首頁五格For6.0(GBK)(UTF-8)[12種組合][9-18][版主安裝測試通過]
首頁四格,首頁五格For6.0(GBK)(UTF-8)[12種組合][9-18][版主安裝測試通過]...2007-09-09laravel實(shí)現(xiàn)于語言包的完美切換方法
今天小編就為大家分享一篇laravel實(shí)現(xiàn)于語言包的完美切換方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09destoon后臺(tái)網(wǎng)站設(shè)置變成空白的解決方法
這篇文章主要介紹了destoon后臺(tái)網(wǎng)站設(shè)置變成空白的解決方法,需要的朋友可以參考下2014-06-06php輸入流php://input使用示例(php發(fā)送圖片流到服務(wù)器)
在做一個(gè)攝像頭拍照然后上傳的功能,php中使用php://input來獲取內(nèi)容,可以看下面的示例2013-12-12Laravel 5框架學(xué)習(xí)之子視圖和表單復(fù)用
本文給大家主要介紹的是Laravel5框架中的子視圖以及表單復(fù)用的用法,十分的細(xì)致全面,對于大家熟練掌握Laravel5框架非常有幫助,有需要的小伙伴可以參考下2015-04-04