layui+springboot文件上传下载代码

最新推荐文章于 2023-06-08 14:28:22 发布

坑货两只

最新推荐文章于 2023-06-08 14:28:22 发布

阅读量158

点赞数

文章标签： layui spring boot javascript 前端 jquery

本文链接：https://blog.csdn.net/weixin_35752122/article/details/129502086

版权

文章提供了使用Layui框架的upload模块进行文件上传的代码示例，包括选择文件按钮、图片预览、上传成功与失败的处理。用户可以通过这段代码实现前端的图片上传功能，并与后台/upload/接口进行交互。

摘要由CSDN通过智能技术生成

很抱歉，因为代码较多，在此不便完整提供。不过，我可以给您一些指导和代码片段。

Layui文件上传的实现需要使用 layui 的 upload 模块。您可以在页面中使用如下代码实现文件上传：

<div class="layui-upload">
  <button type="button" class="layui-btn" id="test2">选择文件</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo2">
    <p id="demoText"></p>
  </div>
</div>

<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;

  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test2'
    ,url: '/upload/'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').attr('src', result); //图片链接(base64)
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
      $('#demoText').html('文件上传成功');
    }
    ,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>