使用layui實現圖片上傳功能
阿新 • • 發佈：2022-03-15
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
//記住,要引入相應的css和js
<link rel="stylesheet" href="./lib/layui/css/layui.css" media="all"> <link rel="stylesheet" href="./css/xadmin.css"> <script type="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="./lib/layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="./js/xadmin.js"></script> </head> <body> <div class="layui-form-item"> <label class="layui-form-label">圖片</label> <div class="layui-input-inline uploadHeadImage"> <div class="layui-upload-drag" id="headImg" > <i class="layui-icon"></i> <p>點選上傳圖片，或將圖片拖拽到此處</p> </div> </div> <div class="layui-input-inline"> <div class="layui-upload-list"> <img class="layui-upload-img headImage" src="" id="demo1" width="100"> <p id="demoText"></p> </div> </div> </div> </body> <script> layui.use(['form', 'layer','upload',"element"], function() { $ = layui.jquery; var form = layui.form, upload = layui.upload, layer = layui.layer; //拖拽上傳 var uploadInst = upload.render({ elem: '#headImg' , url: './upload.php' //必填(請求的地址) , size: 2000 , before: function (obj) { //預讀本地檔案示例，不支援ie8 obj.preview(function (index, file, result) { $('#demo1').attr('src', result); //圖片連結（base64） }); } , done: function (res) { console.log(res); //如果上傳失敗 if (res.code > 0) { return layer.msg('上傳失敗'); } var demoText = $('#demoText'); // demoText.html('<span style="color: #8f8f8f;">上傳成功!!!</span>'); $("#imagepath").val(res.image) layer.msg("上傳成功") } , error: function () { //演示失敗狀態，並實現重傳 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); element.init(); }) </script> </html>
$data['code'] = 0;
return json($data);
需要返回一個json格式的資料