layUI之圖片上傳
通常情況下,我們上傳檔案是藉助 type="file" 的 input 標籤來完成的,但非常遺憾的是,它不能很好地與其它表單元素並存,所以我們常常要單獨為它做一個業務層面的“非同步上傳”,即先讓圖片上傳,再和其它表單一起提交儲存
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上傳圖片
</button>
<script>
layui.use('upload', function(){
var upload = layui.upload;
//執行例項
var uploadInst = upload.render({
elem: '#test1' //繫結元素
,url: '/upload/' //上傳介面
,done: function(res){
//上傳完畢回撥
}
,error: function(){
//請求異常回調
}
});
});
<method 上傳介面的 HTTP 型別 string post/script>
accept 指定允許上傳時校驗的檔案型別,可選值有:images(圖片)、file(所有檔案)、video(視訊)、audio(音訊) string images
done 執行上傳請求後的回撥。返回三個引數,分別為:res(服務端響應資訊)、index(當前檔案的索引)、upload(重新上傳的方法,一般在檔案上傳失敗後使用)。詳見下文 function
laytpl 是 JavScript 模板引擎,在字元解析上有著比較出色的表現,欠缺之處在於異常除錯上。由於傳統意義的前端模板引擎已經變得不再流行,所以 laytpl 後續可能會進行重寫,目前方向暫時還沒有想好,預計會在layui比較穩定後開始實施。
與一般的字元拼接不同的是,laytpl 的模板可與資料分離,集中把邏輯處理放在 View 層,提升程式碼可維護性,尤其是針對大量模板渲染的情況。
err_incomplete_chunked_encoding