layUI 图片上传成功后如何清空

最新推荐文章于 2023-04-29 09:45:39 发布
最新推荐文章于 2023-04-29 09:45:39 发布
阅读量3.2k 收藏
点赞数 2
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RightNaid/article/details/104021893
版权

因为图片上传是在弹框里写的，上传成功后，无法刷新，因此不能用刷新页面的方法清空
图片上传成功后的done方法里，返回了三个值：res, index, upload。index就是每个图片文件的索引

done: function(res, index, upload) {
	delete files[index];
}

每个文件上传成功后，都会调用一下done方法，就可以根据索引清空该图片，下次上传就不会上传重复图片啦

RightNaid
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui 上传图片 返回图片地址的方法
10-16
今天小编就为大家分享一篇layui 上传图片 返回图片地址的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui上传,上传完成后清除以前选中的
qq_42766605的博客
12-22 1438
let UPLOAD_FILES; function clearFile() { for (let x in UPLOAD_FILES) { delete UPLOAD_FILES[x]; } } var scz = true; layui.use('upload', function () { var upload = layui.upload; //多图片上传 upload.render({ elem: '#test2'
layui upload resetFile 重复上传
web_houzhanguo的博客
03-30 1167
单文件上传注意事项 废话不多说，直接上代码 let uploadFile = upload.render( { elem: '#upload' , url: '<%=basePath%>/exam/ExamCourseCoursewareAction.do?method=saveExamCourseCourseware' ,//此处配置你自己的上
layui使用总结，图片上传，模板替换，表单提交等
Xiazhiyu_whu的博客
07-11 3683
单图上传封装 每次上传图片js都要重新写一遍upload.reader方法，通过固定模板每次调用一个方法即可。 //图片上传渲染方法    general.js function simpleUpload(name){ var upload = layui.upload var uploadBtn = name + '_btn'; var inputId = name + "_inp...
layui 文件上传upload.render清空已选择文件并重新选择同名文件
withwindluo的博客
05-13 6232
做需求时遇到个问题，上传的excel文件检验后不符合数据要求，需要清空已上传的缓存 $('.layui-upload-file').attr('type', 'hidden'); $('.layui-upload-file').attr('type', 'file'); clearFile(); demo var UPLOAD_FILES; upload.render({ elem: '#uploadFile', //绑定元素 // url: '/property/importData',
lyaui清除图片文件上传成功后清除文件队列，防止重复提交
liuyue2018的博客
02-28 2398
最近使用layui发现，在页面上传了图片可以用以下方式清除文件队列，在此做下笔记 let uploadInst = upload.render({ elem: '#test1' //绑定元素 ,url: 'up.php' //上传接口 ,accept: "images"//允许上传的文件类型 ...
LayUI中的内置模块之 图片/文件上传 layui.upload
daimeijin的博客
08-14 6257
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 图片/文件上传 - layui.upload 上传模块自 layui 2.0 的版本开始，进行了全面重写，这使得它不再那么单一，它所包含的不仅是更为强劲的功能，还有灵活的 UI。任何元素都可以作为上
jq+layui 实现图片拖拽上传功能
02-28
在IT行业中，实现图片拖拽上传功能是一种提升用户体验的有效方式，尤其在网页...以上就是jq+layui实现图片拖拽上传功能的详细步骤和关键知识点，希望对你有所帮助。在实际项目中，你可以根据需求进行相应的扩展和优化。
layui 图片上传+表单提交+ Spring MVC的实例
10-16
在本实例中，我们主要探讨了如何利用Layui库进行图片上传，同时结合表单提交和Spring MVC框架实现后端处理。Layui是一个轻量级的前端组件库，提供了丰富的UI组件，包括上传功能。以下是具体的知识点： 1. **Layui...
cropper+layui实现图片裁剪、旋转、放大缩小后上传
12-12
5. **图片上传**：裁剪完成后，将`Cropper`对象的`getCroppedCanvas`方法生成的裁剪图片转换为DataURL，然后通过Ajax或其他方式发送到服务器进行保存。 在项目中，`不错的例子.txt`可能包含了具体的代码示例或实现...
layui图片上传后轮播.zip
09-30
layui 首个版本发布于2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身...
layui框架实战案例(21)：layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
04-29 7055
使用 upload 模块必须与 upload.render(options) 方法打交道，其中的 options即为基础参数，它是一个对象。
layui文件上传控件，上传完文件之后自动清空以选择的文件
Mattscl的博客
04-13 1万+
最近遇到一个问题，就是使用layui文件上传控件的时候已经上传成功的控件会继续和原文件绑定在一起，影响第二次上传的效果（注意我是单文件上传控件，也就是每次只能选择一个文件）。 本来想要实现标题的效果，但是由于开发时间有限就换了一种解决方法。 当然这不是什么难题， 拿到layui的upoad.js源码分析一下还是可以找到对应的解决办法的。 前面多说了几句废话， 下面说一下解决方法： 在上传文件方法之...
layui-upload文件上传后清空以上传的文件跟选择文件后清空上一次选择的文件
江西DJ烟仔的博客
05-26 1万+
其实很简单的,只是看到网上没有能用的解决方法,所以把代码贴一下,希望能帮助有需要的同志 解决思路就是在回方法 choose 中 通过 UPLOAD_FILES = obj.pushFile(); 将它的返回值用一个变量存起来, 在文件上传成后把UPLOAD_FILES 这个变量里的文件全部删除, 因为我找了一下 layui 的文件上传好像没有提供可以获取所有文件的api方法, 只能通过这种方式...
layui上传图片后表单刷新，数据清空
QYHuiiQ
09-01 5988
使用layui添加表单数据时，点击上传图片的按钮选择完图片之后，之前在表单里填的东西都刷新了，数据清空，解决办法是在button标签中添加一个type="button" &lt;button class="layui-btn test" lay-data="{url:'/pic/upload'}" type="button"&gt;课程图片&lt;/button&gt;...
layui清空，重置表单数据
热门推荐
天大会下雨的博客
12-26 6万+
最近在使用layui框架，在页面进行表单数据提交后，要是页面表单数据清空，依是有下面方法 表单： &lt;form class="layui-form" action="" lay-filter="addGoodsForm" id="addGoodsForm"&gt; 主题内容 &lt;/form&gt; jquery： //监听提交 form.
layui使用upload组件上传图片前的压缩
05-20 2329
对于很多情况，我们都有在前端压缩图片后再上传的需求，如果是单独的上传过程直接做就可以，但对于layui这种框架就需要注意下了。 具体方法如下（前端压缩图片我使用的是image compressor这个JS库）： upload.render({ elem: '#uploadpicbtn' , url: somewhere //必填项 , auto: false , choose: function (obj)
layui中在form表单结构中点击upload上传后，当上传失败时，点击重传，form表单会刷新清空数据解决方法
qq_35500778的博客
11-01 1029
解决方法：在重传按钮中添加一个type=button的属性 <button type="button" class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>
layui文件上传，表单参数清空备忘录
bigbig_bug的博客
09-24 293
文件上传，需要携带一些参数到后台，上传完毕后，再次打开窗口，上次填写的参数还在，需要清除参数，考虑好多方法，重置表单等等，都无法生效 最后，想到一个方法，上传文件这个窗口是使用layer.open这个方法打开的，这个方法里有一个函数 当这个窗口销毁的时候，可以触发此函数，然后实现表单的刷新 var index=layer.open({ type: 1, area: ["600px", "600px"], ...
layui 图片上传
最新发布
06-01
layui是一款基于jQuery的前端UI框架，它提供了很多实用的组件和工具，其中包括图片上传组件。layui的图片上传组件可以帮助我们轻松地实现图片上传功能，支持拖拽上传、多图上传、裁剪等操作。在使用layui的图片上传组件之前，需要引入layui.js和layui.css文件，并在HTML中添加相关的代码。以下是一个简单的示例： ``` <div class="layui-upload"> <button type="button" class="layui-btn" id="test1">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="demo1"> <p id="demoText"></p> </div> </div> <script> layui.use('upload', function(){ var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#test1', //绑定元素 url: '/upload/', //上传接口 done: function(res){ //上传完毕回调 console.log(res); }, error: function(){ //请求异常回调 console.log('上传失败'); } }); }); </script> ``` 在这个示例中，我们创建了一个按钮，点击该按钮可以弹出文件选择框，选择图片后可以预览并上传。具体的上传接口需要根据自己的实际情况进行配置。如果需要更多的功能，可以参考layui官方文档中的图片上传组件部分进行扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值