本章節主要講解如果靈活運用layui和thinkphp5進行無刷新圖片上傳
#### 1.上傳接口書寫
1.建立一個Upliad.php上傳控制器
2.在控制器下首先建立一個受保護的(protected)的_initialize方法,在這個方法中要進行驗證用戶是否進行登陸,如果沒有進行登陸,需要跳轉到登錄頁面,如果有登錄就執行下面的上傳方法
3.在控制器建立上傳方法
業務邏輯如下:
1. 獲取表單上傳文件
` $file = $request->file('file');`
2. .移動到框架應用根目錄/public/uploads/ 目錄下
~~~
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
~~~
3 .返回上傳后的信息。無論是成功還是失敗都需要返回信息,返回格式必須如下格式
~~~
{
"code": 0
,"msg": ""
,"data": {
"src": "http://cdn.abc.com/123.jpg"
}
}
~~~
# 詳細代碼:[Source Code](上傳接口.md)
#### 2.視圖設計
1. 導入的js和css文件
2. html代碼,添加一個上傳input
`<input type="file" name="file" class="layui-upload-file">`
3. js代碼的實現
* 加載upload模塊
* 詳細參數
| | | |
| --- | --- | --- |
| 參數 | 類型 | 描述 |
| elem | string | 指定元素的選擇器,默認直接查找class為layui-upload-file的元素 |
|url |string |上傳文件的接口|
|method |string |設置http類型,如:post、get。默認post。也可以直接在input設置lay-method="get"來取代。|
|before| function| 執行上傳前的回調|
|success| function| 上傳成功后的回調|
|type| string |設定上傳的文件類型,也可以直接在input設置lay-type=""來取代(詳細見下文)。|
|ext |string |自定義可支持的文件擴展名,也可以直接在input設置lay-ext=""來取代(詳細見下文)。|
|unwrap| boolean |是否不改變input的樣式風格。默認false|
* 官網案例說明
我們上傳文件是借助type為file的input標簽來完成的,但非常遺憾的是,它不能很好地與其它表單元素并存,所以我們常常要單獨為它做一個業務層面的“異步上傳”,即先讓圖片上傳,再和其它表單一起提交保存。下面就是一個非常普通的input,它可以出現你頁面的任何位置。
~~~
<input type="file" name="file(可隨便定義)" class="layui-upload-file">
~~~
另外class="layui-upload-file"不是必須的,她只是會讓你的input短暫性隱藏,并且在調用upload方法時不用設置elem。要使得這個input能正常地用起來,你只需要執行下述方法:
~~~
layui.upload({
url: '上傳接口url'
,success: function(res){
console.log(res); //上傳成功返回值,必須為json格式
}
});
~~~
實現異步上傳官網說明地址:http://www.layui.com/doc/modules/upload.html
# 詳細代碼:[Source Code](視圖.md)
- 序言
- 基礎知識
- thinkphp基礎知識
- Thinkphp5CURD
- 數據庫創建
- 數據庫刪除
- 數據庫更新
- 數據庫查詢
- thinkphp5控制器
- 空操作空控制器
- 控制器基類
- 請求信息
- 行為和鉤子
- thinkphp5路由設置
- 變量路由
- 常用方法清單
- 環境搭建
- lnmp
- 升級php
- window環境
- Thinkphp小案例
- 分類管理
- 數據庫設計
- 模型
- 控制器
- 視圖
- 文件上傳
- 上傳接口
- 視圖
- 表單提交
- 視圖設計
- 控制器
- 權限控制
- 案例解釋說明
- 登錄驗證
- Laravel5.3登錄模式
- redis使用
- 一鍵安裝
- 程序設計與實現
- 頁面設計
- 功能設計
- 安裝功能實際
- 函數庫
- 配置文件
- 清除緩存
- 狀態值修改
- 數據庫備份還原
- controller.php
- common.php
- index.html
- importlist.html
- 完整的增刪查改
- 查詢語句
- 多語言支持
- JpGraph圖表類庫
- 微信支付
- payBase.php
- Order.php
- Oauth.php
- Jspay.php
- 下載遠程地址中的圖片
- URL重寫隱藏入口文件
- 圖片水印
- 整合百度編輯器
- Ueditor
- ueditor完整配置項
- 配置信息常見的方式
- HTTP 斷點續傳(PHP實現)
- layui.upload上傳文件或圖片
- QQ微信域名防封 預防域名封禁 強制跳轉至瀏覽器
- 蜘蛛篇
- 超簡單實現php谷歌驗證
- 采集金山詞霸每日一句
- think-swoole
- 原生PHP小案例
- 查詢修改數據庫
- mysql支付回調源碼
- pdo連接微信退款
- 前端小案例
- html快捷查詢
- layui經驗總結
- layui 表單增強插件
- Vue列表Ajax實戰教程
- PHP基礎
- 類的自動載入
- php基礎函數- 字符串函數
- php基礎函數-數學函數
- php基礎函數-數組函數
- PHP常見排序算法學習
- 請求第三方
- 從網絡下載文件
- 檢查網站是否宕機
- file_get_contents
- 算法
- php 抽獎算法(適合九宮格和大轉盤)
- 自己動手豐衣足食
- 入口文件
- start.php
- app.php
- load.php
- route.php
- JqHttp
- Jqfile
- Jqutil
- pdo連接數據庫類
- 常見的php類
- php數據接口類
- 生成多層樹狀下拉選框的工具模型
- 上傳下載類
- 微信用戶相關類
- Zip壓縮類
- 列表樹生成工具類
- 日期時間操作類
- 文件及文件夾處理類
- 字符串處理類
- php守護進程類
- RSA算法類
- php支持中英文的加密解密類
- CURL多線程請求
- 通用數據庫操作類
- 緩存類
- cookie類
- 常見的驗證方法
- 隨機密鑰
- 日志Log
- php-redis 操作類 封裝
- OpensslRsa 加密、解密、簽名、驗簽類
- 模板輸出類
- 發送郵件
- 封裝的mysqli類
- PHP時間段分割類庫
- PHP apk解包識版本號信息和ipa包信息
- 訪問客戶端信息
- http請求
- PHP 無數據庫讀寫配置文件
- 自己動手寫一個jwt類
- php實現對圖片對稱加解密(適用身份證加密等場景)
- 常見php函數
- 無限分類
- 獲取文章圖片
- 加密解密
- JSON數據輸出(適合在tp中)
- 刪除目錄和文件
- 判斷是否為手機訪問
- 獲取客戶端真實IP
- 隨機生成ip地址
- 字符串與二進制進行轉換
- 對數組進行排序
- 格式化字節大小
- 時間戳格式化
- 獲取數據的所有子孫數據的id值
- 取得視頻文件的縮略圖
- 圖片裁剪函數
- 按照每過0:00算一天
- 下載文件
- PHP隨機密碼生成
- 判斷數字大小
- 報文組成
- 通過ip定位城市
- PDO方式連接MySQL數據庫
- 數組與xml
- php字符串處理函數
- 判斷是否ajax提交
- 生成概率,用于抽獎
- 斷點續傳
- PHP使用星號替代用戶名手機和郵箱
- 獲取毫秒級別的時間戳
- php日志函數
- 隨機顏色生成器
- 時間差異計算函數
- 黑名單過濾
- 常見PHP 正則表達式
- php獲取瀏覽器類型
- 郵件發送
- 獲取qq昵稱
- 正則獲取手機號歸屬地
- 判斷是否是移動客戶端 移動設備
- gbk和utf8編碼自動識別方法
- 人性化時間顯示
- 請求API接口
- 數據庫備份
- PHP并發下安全讀寫文件函數
- PHP讀取exe軟件版本號
- PHP為任意頁面設置訪問密碼
- PHP利用百度當圖床
- 秒/分鐘/小時前
- 常見的js函數
- 短信驗證函數
- 上下收縮菜單
- jQuery 樹插件zTree
- 頁面刷新跳轉
- jquery導出報表
- js實現定時效果
- 獲取當前經緯度
- JQuery實現圖片大小自適應
- 網站運行時間
- 判斷瀏覽器類型
- 百度推送
- js對指定數據進行排序
- 常見工具方法
- JSPinyin
- 技術相關文章
- 高級PHP工程師所應該具備哪些技能
- 最簡潔的PHP程序員學習路線及建議
- 優化PHP代碼的一些建議
- TP5性能優化建議
- 程序猿專用代碼注釋:佛祖保佑,永無BUG
- 一組匹配中國大陸手機號碼的正則表達式
- Apache/Nginx/PHP服務器反爬蟲代碼大全
- 番外
- 配置shadowsocks服務端
- python
- go
- 如何在1分鐘內黑掉任何網站!
- 百度貼吧敏感詞
- 貼吧手工養號發帖教程
- 搞笑的注釋代碼
- Heroku