关于Bootstrap fileinput 上传新文件,移除时触发服务器同步删除的配置

时间:2022-04-10 00:32:25

在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器上的文件和记录。但新上传的文件则需要其他方式来同步删除服务器记录。

在配置中遇到的一些问题,记录一下。

关于Bootstrap fileinput 上传新文件,移除时触发服务器同步删除的配置

fileinput在文件上传成功后会触发'fileuploaded'事件,移除图片后会触发'filesuccessremove'事件。

其中在fileuploaded中参数previewId是形如:preview-1538964832345-2这样的一串字符,而在filesuccessremove里previewId是以uploaded开头并且数字也和fileuploaded中的不一样,像这样的:uploaded-1538964834797_18,但其实两者都是指向同一个div的id。所以上传成功后我们只要在fileuploaded将服务器返回的数据key或者ID放入该div中,移除时在从中取出就可以了。

代码如下:

//files为fileinput控件ID,
$('#files').on('fileuploaded', function (e, data, previewId, index) {
      //在上传成功事件中将服务器返回的所需数据,添加到该文件对应的div中
      $('#' + previewId).attr('fileid', data.response.fileid);
}).on('filesuccessremove', function (event, previewId, extra) {
      //在移除事件里取出所需数据,并执行相应的删除指令
delete(($('#' + previewId).attr('fileid'));
});

关于Bootstrap fileinput 上传新文件,移除时触发服务器同步删除的配置的更多相关文章

  1. bootstrap fileinput上传文件

    参考博客:https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974  https://www.cnblogs.com/parker-y ...

  2. Bootstrap FileInput 上传 中文 API 整理

    Bootstrap FileInput 上传  中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看  会用就行 自己都不知道每个值是干嘛用的就问 ...

  3. .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  4. bootstrap fileinput 上传文件

    最近用到文件上传功能, 说实话:以前遇到过一次,COPY了别人的代码 结束! 这次又要用,可是看到别人很酷的文件上传功能,心痒了! 好吧.简单的办法,找控件: bootstrap fileinput ...

  5. php 上传音频文件并获取时长

    <input type="file" name="audio" id="voice_file" style="display ...

  6. bootstrap fileinput上传返回400,404,500 等错误替换

    $(".uploadfile").on('filebatchuploaderror', function(event, data, msg) { $(".file-err ...

  7. java-plupload上传大文件

    参考链接: https://blog.csdn.net/hjf_1291030386/article/details/74784172 https://www.cnblogs.com/tengyunh ...

  8. 以springMVC为例获取上传视频文件时长

    毕设项目是一个在线学习系统,教师用户有上传视频的功能,在答辩之前赶了一个demo出来,好多功能都写死了,比如课程学习进度就是被我写死在前端的一个变量,最近导师要我把项目打包发给他,这才心慌慌赶紧把这些 ...

  9. Web上传大文件的解决方案

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

随机推荐

  1. MySQL 排名统计

    select actor_id,@curr_cnt:=cnt as cnt , ,@rank) as rank, @prev_cnt:=@curr_cnt as dummy from( select ...

  2. KnockoutJS 3&period;X API 第五章 高级应用&lpar;1&rpar; 创建自定义绑定

    您不仅限于使用内置的绑定,如click,value绑定等,您可以创建自己的绑定. 这是如何控制视图模型如何与DOM元素进行交互,并且为您提供了大量的灵活性,以便于以复用的方式封装复杂的行为. 注册绑定 ...

  3. ProgressBar及其子类

    1.ProgressBar(进度条组件) 派生了两个常用的组件:SeekBar和RatingBar. <1>通过style属性可以为ProgressBar指定风格,该属性可支持如下几个属性 ...

  4. C&num;中Action和Func的使用

    在日常使用delegate时,我们通常需要显示声明一个名为XXX的委托,而在使用Action委托时,不必显示定义一个封装无参数过程的委托. 比如正常使用delegate: using System; ...

  5. 消息机制2 - Windows程序设计(SDK)005

    消息机制2 让编程改变世界 Change the world by program 内容节选: 关于消息机制,还有三点需要补充: 消息队列是FIFO的形式 WM_PAINT,WM_TIMER 和 WM ...

  6. 尝试在数据库 5 中提取逻辑页 &lpar;1&colon;1640&rpar; 失败。该逻辑页属于分配单元XXX ,而非 XXX。

    此信息表明数据库或表 已经部分损坏可以通过以下步骤尝试修复: 1. DBCC CHECKDB 重启服务器后,在没有进行任何操作的情况下,在SQL查询分析器中执行以下SQL进行数据库的修复,修复数据库存 ...

  7. 微信ChatEmoji表情适配,对微信公众号开发有帮助

    最近做微信公众号时发现微信ChatEmoji表情与接受的消息显示表情的问题, 微信表情后面的ChatEmoji显示不出,花了一些时间整理,把pc和手机的表情全部都整理了, 由于有两百多个显示可能有点长 ...

  8. &OpenCurlyDoubleQuote;2017面向对象程序设计(Java)第十三周学习总结”存在问题的反馈及本周教学安排

    “2017面向对象程序设计(Java)第十三周学习总结”存在问题的反馈及本周教学安排1. 图形界面事件处理技术是Java GUI编程核心技术,要求同学们掌握其基本原理和基本编程模型:2. 本周四理论课 ...

  9. kepware http接口 javascript开发

    读取某变量的值(jquery var settings = { "async": true, "crossDomain": true, "url&qu ...

  10. vue--引入富文本编辑器

    https://blog.csdn.net/div_ma/article/details/79536634 // 使用 https://blog.csdn.net/div_ma/article/det ...