用layui实现图片上传的方法:首先打开html文件,并引用其中的layui.css和layui.js;然后调用前端的html代码,设置id值;最后通过“upload.render({...})”方法实现图片上传即可。
本教程操作环境:Windows7系统、layui2.4版,该方法适用于所有品牌电脑。
推荐:《javascript基础教程》《layUI教程》
layui上传功能的实现:
一、前往官网下载layui的框架
打开html文件,引用其中的 layui.css 和 layui.js
二、调用前端的html代码,设置id值。
<div class="layui-upload upload"> <button type="button" class="layui-form-label" id="upload">上传图片</button> <input class="layui-upload-file" type="file" accept="" name="file"> <div class="layui-upload-list"> <img class="layui-upload-img" id="demo1"> <p id="demoText"></p> </div> </div> <script> layui.use(['laypage', 'layer', 'upload'], function () { var laypage = layui.laypage //设置配置环境 , layer = layui.layer , upload = layui.upload //上传图片 var uploadInst = upload.render({ elem: '#upload' , url: '/upload/' //改成您自己的上传接口 , before: function (obj) { //预读本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $('#demo1').attr('src', result); //图片链接(base64) }); } , done: function (res) { //如果上传失败 if (res.code > 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>
以上就是怎么用layui实现图片上传的详细内容,更多请关注php中文网其它相关文章!
已抢16746个
抢已抢49732个
抢已抢184090个
抢已抢65968个
抢已抢350178个
抢已抢663801个
抢