layui現(xiàn)學(xué)現(xiàn)用一段時(shí)間發(fā)現(xiàn)還挺好用的。對(duì)一些不復(fù)雜的功能來說還算是方便。

記錄一下上傳圖片方式，layui集成了圖片上傳及預(yù)覽的方式。

看看效果圖

?

前端HTML代碼，用于展示上傳圖片按鈕及預(yù)覽的位置；? 還帶進(jìn)度條哦...

<div class="layui-upload" style="margin-left: 110px;margin-bottom: 30px;"><button type="button" class="layui-btn" id="uploadImg">上傳圖片</button><div style="display:none;"><input type="text" name="img_url" id="ipt_fileName" autocomplete="off" class="layui-input"></div><div class="layui-upload-list"><img class="layui-upload-img" id="img_id"><p id="demoText"></p></div><div style="width: 95px;"><div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="upload_filter"><div class="layui-progress-bar" lay-percent=""></div></div></div></div>

JS方面需要聲明?upload 上傳、下載功能

即

layui.use(['form','upload'], function () {var form = layui.form;var $ = layui.jquery, upload = layui.upload; });

上傳圖片JS方法

//常規(guī)使用 - 普通圖片上傳var uploadInst = upload.render({elem: '#uploadImg', url: '上傳接口', before: function (obj) {//預(yù)讀本地文件示例，不支持ie8obj.preview(function (index, file, result) {$('#img_id').attr('src', result); //圖片});element.progress('upload_filter', '0%'); //進(jìn)度條layer.msg('上傳中', { icon: 16, time: 0 });}, done: function (res) {if (res.code > 0) {return layer.msg('上傳失敗');}$('#demoText').html(''); //置空上傳失敗的狀態(tài)$("#ipt_fileName").val(res.msg);}, error: function () {//展示失敗狀態(tài)，并重新上傳var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');demoText.find('.demo-reload').on('click', function () {uploadInst.upload();});}//進(jìn)度條, progress: function (n, elem, e) {element.progress('upload_filter', n + '%'); //可配合 layui 進(jìn)度條元素使用if (n == 100) {layer.msg('上傳完畢', { icon: 1 });}}});

HTML代碼跟JS 代碼是通過uploadImg 這個(gè)ID進(jìn)行聯(lián)系的

<button type="button" class="layui-btn" id="uploadImg">上傳圖片</button>

只需要實(shí)現(xiàn)這兩步上傳圖片功能就已經(jīng)實(shí)現(xiàn)了。

后端上傳功能用文件流的方式保存到指定地方就可以了，這個(gè)百度上也是有很多相應(yīng)的上傳方法。

總結(jié)

以上是生活随笔為你收集整理的LayUI上传图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。