前端開發之使用layui.js實現簡單上傳功能 - ManBetX万博全站app網絡
400-800-9385
網站建設資訊詳細

前端開發之使用layui.js實現簡單上傳功能

發表日期:2020-06-28 11:46:36   作者來源:彬   瀏覽:1958   標簽:前端開發    
在做項目中可能會遇到用戶上傳文件或者圖片的問題,這裏我使用layui.js,它主要使用起來非常的簡單和方便,使用前需要去到layer官網去下載相關的js,下載地址layui官網.官網的示例如果有跟你需求差不多,可以直接拿過來用,有些不同的可以修改參數來配合實現你的需求,我來講一講我使用的過程和遇見的問題。
前端通過layui文件上傳控件 把上傳的文件上傳的後台,通過ThinkPHP框架的的上傳方法實現上傳文件,因為我前端的樣式已經寫好了所以使用的是id綁定上傳控件。
<input class="r-file" type="file" name="file_url"  id="j_upload">
加載js和css
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<script src="./layui/layui.js" charset="utf-8"></script>

代碼1

Js調用 綁定上傳控件的id ,默認的是post方式 提交到後台。

代碼2

後台需要接收數據的參數一定要是你控件的name命名,這裏input的name是file_url所以後台接收是使用$_FILES["file_url"],在tp裏要使用$_FILES去獲取文件信息,然後實例化框架的上傳類,這裏把文件保存到緩存臨時文件夾裏麵,返回上傳的文件信息到前端,實現前端的文件回顯和一下響應事件,我這裏比較簡單隻完成了回顯,
<input type="hidden" class="rinput" id="file_urls" name="file_urls" value="">
<input type="hidden" class="rinput" id="file_name" name="file_name" value="">
<input type="hidden" class="rinput" id="file_id" name="file_id" value="0">
我使用了隱藏標簽去保存文件的信息,等待用戶提交後,在提交方法裏判斷數據和實現文件的轉移我這裏用php的rename()函數來轉移文件

代碼3

如沒特殊注明,文章均為ManBetX万博全站app網絡原創,轉載請注明來自https://www.engstuff.com/news/5731.html
前端相關公司評論
  • 2.駐點數據軟件工程師、前端工程師、後端工程師、雲業務專員(技術類崗位聘用人員為公司正式職工):試用期2個月,試用期工資按照轉正工資的80%發放(試用期即簽訂正式勞動合同,開始購買社會保險);...
    思茅開發網站公司
  • 為什麽說學習前端知識很有必要呢?一般情況下,ui設計師負責設計頁麵,然後和前端對接,如果ui人員不了解前端基本知識,那溝通難度就會很大。另外,ui設計師了解前端知識,也可以獨...
    遵義係統開發公司