在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器上的文件和记录。但新上传的文件则需要其他方式来同步删除服务器记录。
在配置中遇到的一些问题,记录一下。
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 上传新文件,移除时触发服务器同步删除的配置的更多相关文章
-
bootstrap fileinput上传文件
参考博客:https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974 https://www.cnblogs.com/parker-y ...
-
Bootstrap FileInput 上传 中文 API 整理
Bootstrap FileInput 上传 中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看 会用就行 自己都不知道每个值是干嘛用的就问 ...
-
.net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件
asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode 1.导入所需要的包:n ...
-
bootstrap fileinput 上传文件
最近用到文件上传功能, 说实话:以前遇到过一次,COPY了别人的代码 结束! 这次又要用,可是看到别人很酷的文件上传功能,心痒了! 好吧.简单的办法,找控件: bootstrap fileinput ...
-
php 上传音频文件并获取时长
<input type="file" name="audio" id="voice_file" style="display ...
-
bootstrap fileinput上传返回400,404,500 等错误替换
$(".uploadfile").on('filebatchuploaderror', function(event, data, msg) { $(".file-err ...
-
java-plupload上传大文件
参考链接: https://blog.csdn.net/hjf_1291030386/article/details/74784172 https://www.cnblogs.com/tengyunh ...
-
以springMVC为例获取上传视频文件时长
毕设项目是一个在线学习系统,教师用户有上传视频的功能,在答辩之前赶了一个demo出来,好多功能都写死了,比如课程学习进度就是被我写死在前端的一个变量,最近导师要我把项目打包发给他,这才心慌慌赶紧把这些 ...
-
Web上传大文件的解决方案
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
随机推荐
-
MySQL 排名统计
select actor_id,@curr_cnt:=cnt as cnt , ,@rank) as rank, @prev_cnt:=@curr_cnt as dummy from( select ...
-
KnockoutJS 3.X API 第五章 高级应用(1) 创建自定义绑定
您不仅限于使用内置的绑定,如click,value绑定等,您可以创建自己的绑定. 这是如何控制视图模型如何与DOM元素进行交互,并且为您提供了大量的灵活性,以便于以复用的方式封装复杂的行为. 注册绑定 ...
-
ProgressBar及其子类
1.ProgressBar(进度条组件) 派生了两个常用的组件:SeekBar和RatingBar. <1>通过style属性可以为ProgressBar指定风格,该属性可支持如下几个属性 ...
-
C#中Action和Func的使用
在日常使用delegate时,我们通常需要显示声明一个名为XXX的委托,而在使用Action委托时,不必显示定义一个封装无参数过程的委托. 比如正常使用delegate: using System; ...
-
消息机制2 - Windows程序设计(SDK)005
消息机制2 让编程改变世界 Change the world by program 内容节选: 关于消息机制,还有三点需要补充: 消息队列是FIFO的形式 WM_PAINT,WM_TIMER 和 WM ...
-
尝试在数据库 5 中提取逻辑页 (1:1640) 失败。该逻辑页属于分配单元XXX ,而非 XXX。
此信息表明数据库或表 已经部分损坏可以通过以下步骤尝试修复: 1. DBCC CHECKDB 重启服务器后,在没有进行任何操作的情况下,在SQL查询分析器中执行以下SQL进行数据库的修复,修复数据库存 ...
-
微信ChatEmoji表情适配,对微信公众号开发有帮助
最近做微信公众号时发现微信ChatEmoji表情与接受的消息显示表情的问题, 微信表情后面的ChatEmoji显示不出,花了一些时间整理,把pc和手机的表情全部都整理了, 由于有两百多个显示可能有点长 ...
-
“2017面向对象程序设计(Java)第十三周学习总结”存在问题的反馈及本周教学安排
“2017面向对象程序设计(Java)第十三周学习总结”存在问题的反馈及本周教学安排1. 图形界面事件处理技术是Java GUI编程核心技术,要求同学们掌握其基本原理和基本编程模型:2. 本周四理论课 ...
-
kepware http接口 javascript开发
读取某变量的值(jquery var settings = { "async": true, "crossDomain": true, "url&qu ...
-
vue--引入富文本编辑器
https://blog.csdn.net/div_ma/article/details/79536634 // 使用 https://blog.csdn.net/div_ma/article/det ...