关于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来进行限制. 第一步: 前端修改 由于项目使用的是 ...
随机推荐
- dwr学习(一):简单dwr实例
博客分类: dwr 最近写ajax写烦了,想着能不能有个更简单的“ajax”,一问就问到这个dwr了.赶紧去官网学习了下,这里写个博客记录一下实例. 测试环境:tomcat6.0 1.新建一个w ...
- google的android工具常用下载路径
android的bug工具在网上搜的时候,经常被索引到垃圾网站,今天找到了一个网站下载android工具 都是最新的,十分不错,就做个分享吧. Google 提供了 Windows.macOS 以及 ...
- 机器学习基石笔记:13 Hazard of Overfitting
泛化能力差和过拟合: 引起过拟合的原因: 1)过度VC维(模型复杂度高)------确定性噪声: 2)随机噪声: 3)有限的样本数量N. 具体实验来看模型复杂度Qf/确定性噪声.随机噪声sigma2. ...
- python语法基础-初始化/继承
写了一些程序,基本上都是直接def函数 然后在main方法中 调用 但是在一些应用程序中 会有基本语法的使用(初始化,继承) 初始化: 1.在程序执行时一定执行一次的操作 2.python中初始化in ...
- 【xsy2303】呀 dp
题目大意:你需要构造一个长度为$n$的排列$A$,使得里面包含有子序列$B$(子序列$B$为一个给定的$1$到$m$的排列),且对于每个$i$,有$A[A[i]]=i$,问有多少种方案方案. 数据范围 ...
- welcome-file-list修改后不生效
用别的浏览器重新尝试一下,或者清缓存.我就是这样解决的.值得注意的就是,<welcome-file>里面指定的文件可以是.do或者是action.
- 课程四(Convolutional Neural Networks),第一周(Foundations of Convolutional Neural Networks) —— 0.Learning Goals
Learning Goals Understand the convolution operation Understand the pooling operation Remember the vo ...
- oracle查锁及解锁命令
--查询行锁语句 select sql_text from v$sql a,v$session b where a.sql_id=b.sql_id and b.event='enq: TX - row ...
- C#单元测试分享ppt
单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证.对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函数,Java里单元指一个类, ...
- oc中的oop基础及类的基本介绍
面向对象的(OOP)的基础知识 类(class):表示一组对象数据的结构体,对象通类来得到自身.类名首字母大写. 对象(objcet):是一种包含值和指向其类的隐藏指针的结构体.运行中的程序中通常会有 ...