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 = der({
elem: '#upload'
, url: '/upload/'//改成您⾃⼰的上传接⼝
, before: function (obj) {
/
/预读本地⽂件⽰例，不⽀持ie8
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result); //图⽚链接（base64）
});
}
, done: function (res) {
//如果上传失败
if (de > 0) {
return layer.msg('上传失败');
layui下载
}
//上传成功
}
, error: function () {
//演⽰失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span >上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');                demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
});
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。