layui 點選頭像 上傳頭像
阿新 • • 發佈：2018-11-14
在開發過成中,難免是會要接觸到圖片上傳後實現即時預覽的,但是說實話,這樣實現起來不使用外掛的話,程式碼量還是有一點點的,
所以今天就推薦使用layui 來實現圖片的上傳功能,非常簡單和適用,廢話不多說 貼出程式碼來
#程式碼部分
<html> <head> <title>layui 點選上傳圖片</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201801090202"/> <script src="//layui.hcwl520.com.cn/layui/layui.js?v=201801090202"></script> </head> <body> <div> <div class="layui-form-item"> <label class="layui-form-label">上傳頭像</label> <div class="layui-input-inline"> <div class="layui-upload"> <input type="hidden" name="logo" value="" id="logo"> <div class="layui-upload-list"> <img class="layui-upload-img" id="demo1" width="80px" height="80px"> <p id="demoText"></p> </div> </div> </div> </div> </div> </body> <script> var myVarate = 'https://www.baidu.com/img/bd_logo.png'; layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () { var layer = layui.layer, upload = layui.upload, $ = layui.$, demoText = $('#demoText'); $('#demo1').attr('src', myVarate);//頁面初始化的時候渲染圖片 //普通圖片上傳 var uploadInst = upload.render({ elem: '#demo1', url: 'http://bolg.lengff.xyz/test',//這裡填寫你的上傳地址 accept: 'images', method: 'post', acceptMime: 'image/*' , before: function (obj) { /*如果您不想用上面的URL 進行上傳,也可以在這裡,新增你的上傳方式*/ obj.preview(function (index, file, result) { $('#demo1').attr('src', result);//圖片連結（base64） }); }, done: function (res) { if (res.code == 200) {//長傳成功(具體返回code 看後臺是怎麼處理的) return layer.msg('上傳失敗'); demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>'); } else { layer.msg('圖片上傳成功!'); } } , error: function () { 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(); }); }); </script> </html>
#說明
具體的實現原理其實很簡單,就是依賴layui的檔案上傳工具
#效果圖點我檢視
#尾巴 沒有尾巴