关于Bootstrap fileinput 上传新文件,移除时触发服务器同步删除的配置
在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来进行限制. 第一步: 前端修改 由于项目使用的是 ...
随机推荐
- 功能强大的swiper插件
概述 今天体验了一下swiper,真是太强大了,无论是PC端还是移动端,各种轮播滑块效果随便实现.美中不足的是,有些实现需要自己想办法.下面我记录下我的需求和我的实现,供以后开发时参考,相信对其他人也 ...
- numpy中array和asarray的区别
array和asarray都可以将结构数据转化为ndarray,但是主要区别就是当数据源是ndarray时,array仍然会copy出一个副本,占用新的内存,但asarray不会. 举例说明: imp ...
- 机器学习技法笔记:03 Kernel Support Vector Machine
Roadmap Kernel Trick Polynomial Kernel Gaussian Kernel Comparison of Kernels Summary
- 在Android Studio添加本地aar包引用
1.如何在Android Studio添加本地aar包引用 https://jingyan.baidu.com/article/2a13832890d08f074a134ff0.html 2.完成上述 ...
- 学习DDD之路--勇于纠正自己的错误
写这篇文章主要是之前三篇对DDD的介绍算是自己学习的一次试水,也希望能够有更多的人能帮我发现其中的问题.昨天继续阅读了DDD书,发现了自己之前的例子存在了一些问题,早上也和园友进行了一些讨论.最后整理 ...
- tf.cast()的用法(转)
一.函数 tf.cast() cast( x, dtype, name=None ) 将x的数据格式转化成dtype.例如,原来x的数据格式是bool, 那么将其转化成float以后,就能够将其转化成 ...
- 使用 redis-dump 批量导入导出数据
有时候需要将 redis 的数据进行导入导出操作,可以使用 redis-dump 这款工具. 一.安装RVM redis-dump 工具依赖于2.2以上版本的 ruby,而 centos 环境下 yu ...
- eclipse svn 忽略 target目录
这个build失败的解决方案就是不要把你项目的 target目录放在src repository 里面,还有 .project 和 .classpath最好也别放到src repository 里. ...
- 解决Response.AddHeader("Content-Disposition", "attachment; filename=" + file.Name) 中文显示乱码
如果file.Name为中文则乱码.解决办法是方法1:response.setHeader("Content-Disposition", "attachment; fil ...
- 跨域请求中预检请求options之坑
一.前言 因为跨域请求,浏览器可能(后面讲)会发送一次options请求,如果处理不好,跨域还是会gg的. 之前很少涉及跨域,涉及也是简单请求(下面阮老师文章中区别热简单请求和复杂请求),所以基本不会 ...