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上传,上传完成后清除以前选中的
qq_42766605的博客
12-22 1441
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文件上传后清空以上传的文件跟选择文件后清空上一次选择的文件
江西DJ烟仔的博客
05-26 1万+
其实很简单的,只是看到网上没有能用的解决方法,所以把代码贴一下,希望能帮助有需要的同志 解决思路就是在回方法 choose 中 通过 UPLOAD_FILES = obj.pushFile(); 将它的返回值用一个变量存起来, 在文件上传成后把UPLOAD_FILES 这个变量里的文件全部删除, 因为我找了一下 layui 的文件上传好像没有提供可以获取所有文件的api方法, 只能通过这种方式...
layui上传图片后表单刷新，数据清空
QYHuiiQ
09-01 5990
使用layui添加表单数据时，点击上传图片的按钮选择完图片之后，之前在表单里填的东西都刷新了，数据清空，解决办法是在button标签中添加一个type="button" <button class="layui-btn test" lay-data="{url:'/pic/upload'}" type="button">课程图片</button>...
layui文件上传控件，上传完文件之后自动清空以选择的文件
Mattscl的博客
04-13 1万+
最近遇到一个问题，就是使用layui文件上传控件的时候已经上传成功的控件会继续和原文件绑定在一起，影响第二次上传的效果（注意我是单文件上传控件，也就是每次只能选择一个文件）。 本来想要实现标题的效果，但是由于开发时间有限就换了一种解决方法。 当然这不是什么难题， 拿到layui的upoad.js源码分析一下还是可以找到对应的解决办法的。 前面多说了几句废话， 下面说一下解决方法： 在上传文件方法之...
layui文件上传，表单参数清空备忘录
bigbig_bug的博客
09-24 295
文件上传，需要携带一些参数到后台，上传完毕后，再次打开窗口，上次填写的参数还在，需要清除参数，考虑好多方法，重置表单等等，都无法生效 最后，想到一个方法，上传文件这个窗口是使用layer.open这个方法打开的，这个方法里有一个函数 当这个窗口销毁的时候，可以触发此函数，然后实现表单的刷新 var index=layer.open({ type: 1, area: ["600px", "600px"], ...
layui.use(‘upload‘)上传图片去除文件队列
qq_39726798的博客
12-01 1555
var **UPLOAD_FILES**;//上传文件队列集合 layui.use('upload', function () { var $ = layui.jquery, upload = layui.upload; var uploadListIns = upload.render({ elem: '#uploadFile' , multiple: true , accept: 'fi...
layui 上传图片 返回图片地址的方法
10-16
总之，layui的图片上传功能通过简单配置和调用，能方便地实现图片上传并获取返回的图片地址。结合服务器端的处理，你可以构建出一个完整的图片上传系统。在实际项目中，还应注意处理文件大小限制、文件类型验证、...
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 阻止图片上传的实例(before方法)
10-16
在本文中，我们将深入探讨如何使用layui框架来阻止图片上传，并着重分析`before`方法的用法。layui是一个流行的前端JavaScript框架，它提供了丰富的组件，包括文件上传功能。在某些场景下，我们可能需要在用户上传...
lyaui清除图片文件上传成功后清除文件队列，防止重复提交
liuyue2018的博客
02-28 2403
最近使用layui发现，在页面上传了图片可以用以下方式清除文件队列，在此做下笔记 let uploadInst = upload.render({ elem: '#test1' //绑定元素 ,url: 'up.php' //上传接口 ,accept: "images"//允许上传的文件类型 ...
layui多文件上传-删除文件
风清云淡
08-31 3915
layui的文件上传功能相对来说做的不是很完善，很多需求可能需要自己去实现，就像常见的文件手动上传时，对于选中的文件进行删除重新选择，这个就需要自己去现实，这里用上传图片做一个简单示例。 HTML代码： <div class="layui-card"> <div class="layui-card-header">票据照片</div> <div class="layui-card-body"> <div class="la
layui文件上传upload点击实效
qq_57398284的博客
03-21 1015
upload 点击实效
layui使用总结，图片上传，模板替换，表单提交等
Xiazhiyu_whu的博客
07-11 3686
单图上传封装 每次上传图片js都要重新写一遍upload.reader方法，通过固定模板每次调用一个方法即可。 //图片上传渲染方法    general.js function simpleUpload(name){ var upload = layui.upload var uploadBtn = name + '_btn'; var inputId = name + "_inp...
layui框架实战案例(21)：layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
04-29 7156
使用 upload 模块必须与 upload.render(options) 方法打交道，其中的 options即为基础参数，它是一个对象。
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 2345
对于很多情况，我们都有在前端压缩图片后再上传的需求，如果是单独的上传过程直接做就可以，但对于layui这种框架就需要注意下了。 具体方法如下（前端压缩图片我使用的是image compressor这个JS库）： upload.render({ elem: '#uploadpicbtn' , url: somewhere //必填项 , auto: false , choose: function (obj)
layui.upload -图片/文件上传
King Saj
12-18 1221
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文件上传</title> <style>
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、付费专栏及课程。

余额充值