layui.user一個頁面只能有一個，寫多了會實現js效果 上傳圖片官方文檔有很多功能，但是演示的代碼只是一個一個功能演示，如果要綜合起來js代碼不是簡單的拼湊，需要放在指定位置，比如下麵的限制文件大小。 ...
layui.user一個頁面只能有一個，寫多了會實現js效果
上傳圖片官方文檔有很多功能，但是演示的代碼只是一個一個功能演示，如果要綜合起來js代碼不是簡單的拼湊，需要放在指定位置，比如下麵的限制文件大小。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layui動畫測試</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"> <script src="https://www.layuicdn.com/layui/layui.js"></script> </head> <body> <div style="text-align: center"> <img data-anim="layui-anim-scaleSpring" class="layui-upload layui-anim" id="id_upload_img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564555274864&di=f0897dc4a00cccc5f71bdd0d46fe1720&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F21%2F20160821230024_MyCYK.thumb.700_0.jpeg" style="border-radius: 50%; width: 18%"> <div class="layui-word-aux">點擊更換我的頭像</div> <div class="layui-word-aux">上傳圖片限制大小 60kb</div> </div> <script> layui.use(['upload'], function () { var layer = layui.layer; var $ = layui.jquery , upload = layui.upload; //普通圖片上傳開始 var uploadInst = upload.render({ elem: '#id_upload_img', url: '/user/upload_img/', size: 60, //限制文件大小，單位 KB before: function (obj) { //預讀本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $('#id_upload_img').attr('src', result); //圖片鏈接（base64） }); }, done: function (res) { //如果上傳失敗 if (res.status > 0) { return layer.msg('上傳失敗'); } //上傳成功 } , error: function () { //演示失敗狀態，並實現重傳 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(); }); } }); //普通圖片上傳結束 }) </script> </body> </html>
