怎么用layui实现图片上传
用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> <button>上传图片</button> <input> <div> @@##@@ <p></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;">上传失败 <a class="layui-btn layui-btn-xs demo-reload">重试'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); }); </script>