?? ???? Layui? ??? ?? ??? ?????

Layui? ??? ?? ??? ? ???????? ?? ???? ??????. ?? ??? Ajax? ???? ????? ????? ???? ????. ?? ????? ?? HTML? Layui CSS ? JavaScript ??? ???????. ?? ?? ?? ?? ? ??? ???? HTML ??? ??? ??? ???????. ? ???? ????? Layui? ?????? ?? ??? ???? DIV ?? ??? <input> file ??? ?????. ????? JavaScript ??? ??? ?? ??? ???? ??? ?????? ??? ?????.

?? ?? ??? ????.

 <code class="html"><div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="test1">選擇文件</button> <div class="layui-upload-list"> <ul id="demo1"></ul> </div> </div> <script> layui.use(&#39;upload&#39;, function(){ var upload = layui.upload; //執(zhí)行實(shí)例var uploadInst = upload.render({ elem: &#39;#test1&#39; //綁定元素,url: &#39;/upload/&#39; //上傳接口,done: function(res){ //上傳完畢回調(diào)console.log(res); } ,error: function(){ //請(qǐng)求異?；卣{(diào)console.log("Upload failed!"); } }); }); </script></code>

? ?? ? ???? ?? ??? ??? ?????. url ?? ??? ?? ? ??? ????? ?? ???. done ?? ??? ???? ???? ???? error ??? ?????. ??? ???? ?? URL? ?? /upload/ ?????.

Layui? ??? ?? ??? ?? ???? ??

Layui? ??? ?? ??? ?? ??? ?? ??? ?????? ? ?? ?? ??? ??? ?????. ? ??? upload.render() ??? JavaScript ??? ?????. ?? ???? ?? ? ??? ??? ????.

• elem : ??? ?? ??? ????? HTML ?? (? : ?? ?? DIV)? ???? ?? ?? ?????.
• url : ?? ???? ???? ?? ? ????? URL???. ??? ?? ??? ?? ?????.
• accept : ? ?? ??? ?? ?? ?? (? : image/* , .pdf , .txt )? ?????. ?? ?? ???? ??? ? ??? ?? ??? ???? ? ??????.
• multiple : ??? true ? ???? ???? ??? ? ?? ??? ??? ? ????.
• auto : ??? false ? ???? ?? ?? ? ???? ???? ???? ?? ?????. ???? ???? ?? ?? ??? ?? ?? ??? ?? ??? ????? ?? ?????.
• exts : ?? ?? ?? (? : ['jpg', 'png', 'gif'] )? ?????. ??? accept ? ?????.
• size : KB?? ?? ?? ?? ??? ?????.
• number : ???? ??? ??? ?? ?? ?????.

??? ?? ??? ? ?? ?? ?????. ?? ??? ?? Layui ??? ??????.

Layui? ??? ?? ??? ??? ? ??? ?????

Layui? ??? ?? ??? ?? ?????? ?? ???? ?? ??? ?? ???? ????. ??? ?? ? ??? ??? ????? ???? ?? ?? ????? ?? ? ? ????. ?? ? ????? ????? ?????? ?? ????? ?? ???????. ?? ??? ????? ???? ??? ?? ??? ?? ???? ????? ?? ? ? ????. Layui ??? ?????? ? ??? ?????. upload.render() ??? error ?? ??? ???? ??? ??? ?????. ? ??? ?? ??? ??? ???? ??? ??? ? ?? ???? ?????? ???? ? ??? ? ????.

?? ??,?? ?? ???? ??? ??? ? ????.

 <code class="javascript">layui.use('upload', function(){ var upload = layui.upload; upload.render({ elem: '#test1' ,url: '/upload/' ,before: function(obj){ //obj參數(shù)包含的信息，跟選擇的圖片信息有關(guān)layer.load(); //上傳loading } ,done: function(res, index, upload){ if(res.code == 0){ //上傳成功layer.msg('上傳成功'); } else { layer.msg('上傳失敗'); } layer.closeAll('loading'); //關(guān)閉loading } ,error: function(index, upload){ layer.msg('上傳失敗'); layer.closeAll('loading'); } }); });</code>

? ??? ??? (?? Layui ??)? ?????? ? ??/?? ???? ?????.

Layui? ??? ?? ??? ??? ??? ?????

Layui? ??? ?? ??? ?? CSS ???? ???? ??? ??? ??? ???? ????. ??? CSS ??? ???? ?? ???? ??? ? ????. ??? ?? ?? ?? (? : .layui-upload , .layui-upload-list , .layui-upload-btn )? ??? ?? layui css ???? ???????. HTML ?? ??? ?? CSS ??? ?? ??? ???? ???? ??? ??? ??? ?? ? ?? ????. ?? ??? ??? ?? ??? ?? ??? ???????. ?? ???? ??? ??? ???? LAYUI ?? ?? ??? ???? ? ?? ????. ????? ??? ??? ???? ??? ????? ???? ????. ??? ??? ?? CSS? ???? ????? ???? ??? ??? ?????.

? ??? ?? ???? Layui? ??? ?? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!