这篇文章主要介绍使用layui实现图片上传的功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
用layui实现图片上传的方法：首先打开html文件，并引用其中的layui.css和layui.js；然后调用前端的html代码，设置id值；最后通过“upload.render({...})”方法实现图片上传即可。
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实现图片上传的功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
