layui 上传图片功能

本文介绍了使用layui实现图片上传的功能,包括前端代码配置、图片在列表中显示、添加时默认图片设置以及编辑时的回显方法。同时,提供了后端上传代码的简要说明,并鼓励读者查看GitHub上的完整项目代码进行深入学习。
摘要由CSDN通过智能技术生成

重点注意:

1. 导入依赖

    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.7</version>
    </dependency>

    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
      <exclusions>
        <exclusion>
          <groupId>javax.servlet</groupId>
          <artifactId>javax.servlet-api</artifactId>
        </exclusion>
      </exclusions>
    </dependency>

2. 配置上传解析器

    
<!--    上传解析器-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.C
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.上图片 使用layui中的upload组件可以实现图片功能。 HTML代码: ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="uploadBtn">上图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="preview"> <p id="uploadText"></p> </div> </div> ``` JavaScript代码: ```javascript layui.use(['upload', 'layer'], function(){ var upload = layui.upload; var layer = layui.layer; //执行实例 var uploadInst = upload.render({ elem: '#uploadBtn', //绑定元素 url: '/upload/', //上接口 accept: 'images', //只允许上图片 size: 1024, //限制上文件大小,单位KB done: function(res){ //上完毕回调 if(res.code == 0){ //上成功 $('#preview').attr('src', res.data.url); $('#uploadText').html('上成功'); }else{ //上失败 layer.msg(res.msg, {icon: 2}); } }, error: function(){ //请求异常回调 layer.msg('上失败', {icon: 2}); } }); }); ``` 2.删除图片layui中,删除图片可以使用Ajax请求后端接口进行删除操作。 HTML代码: ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="uploadBtn">上图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="preview"> <p id="uploadText"></p> <button type="button" class="layui-btn layui-btn-danger" id="deleteBtn">删除图片</button> </div> </div> ``` JavaScript代码: ```javascript layui.use(['upload', 'layer'], function(){ var upload = layui.upload; var layer = layui.layer; var imageUrl = ''; //执行实例 var uploadInst = upload.render({ elem: '#uploadBtn', //绑定元素 url: '/upload/', //上接口 accept: 'images', //只允许上图片 size: 1024, //限制上文件大小,单位KB done: function(res){ //上完毕回调 if(res.code == 0){ //上成功 imageUrl = res.data.url; $('#preview').attr('src', imageUrl); $('#uploadText').html('上成功'); }else{ //上失败 layer.msg(res.msg, {icon: 2}); } }, error: function(){ //请求异常回调 layer.msg('上失败', {icon: 2}); } }); //删除图片 $('#deleteBtn').click(function(){ if(imageUrl){ //发送Ajax请求删除图片 $.ajax({ type: 'post', url: '/deleteImage', data: { imageUrl: imageUrl }, success: function(res){ if(res.code == 0){ //删除成功 $('#preview').attr('src', ''); $('#uploadText').html(''); imageUrl = ''; }else{ //删除失败 layer.msg(res.msg, {icon: 2}); } }, error: function(){ //请求异常回调 layer.msg('删除失败', {icon: 2}); } }); }else{ layer.msg('还未上图片', {icon: 2}); } }); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值