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


Posted in Javascript onOctober 08, 2018

在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 上传新文件移除时触发服务器同步删除的配置 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
jQuery实现增删改查
Dec 22 jQuery
angularJs提交文本框数据到后台的方法
Oct 08 #Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 #Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 #Javascript
webpack之引入图片的实现及问题
Oct 08 #Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 #Javascript
JS中验证整数和小数的正则表达式
Oct 08 #Javascript
webpack@v4升级踩坑(小结)
Oct 08 #Javascript
You might like
合作指挥官:孟斯克
2020/03/16 星际争霸
PHPLog php 程序调试追踪工具
2009/09/09 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php使用PDO方法详解
2014/12/27 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
javascript几个易错点记录
2014/11/26 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
浅谈Fetch 数据交互方式
2018/12/20 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
大专自我鉴定范文
2013/10/23 职场文书
优秀部门获奖感言
2014/02/14 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
员工安全生产承诺书
2014/05/22 职场文书
班级团队活动方案
2014/08/14 职场文书