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 相关文章推荐
javascript的console.log()用法小结
May 31 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
Angular的事件和表单详解
Dec 26 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
javascript中递归的两种写法
Jan 17 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
vue写一个组件
Apr 09 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
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
PHP新手上路(五)
2006/10/09 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
js中null与空字符串""的区别讲解
2019/01/17 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
python迭代器实例简析
2014/09/25 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python实时获取cmd的输出
2015/12/13 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python中的Cookie模块如何使用
2020/06/04 Python
了解一下python内建模块collections
2020/09/07 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
优秀学生事迹材料
2014/02/08 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2014年部门工作总结
2014/11/12 职场文书
客房部经理岗位职责
2015/02/02 职场文书
放射科岗位职责
2015/02/14 职场文书
红楼梦读书笔记
2015/06/25 职场文书
儿子满月酒致辞
2015/07/29 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL