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 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
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开发中常用的十个代码样例
2016/02/02 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
想学画画?python满足你!
2020/12/24 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
顶撞领导检讨书
2014/01/29 职场文书
八一演出活动方案
2014/02/03 职场文书
中青班党性分析材料
2014/02/16 职场文书
租赁意向书范本
2014/04/01 职场文书
环保倡议书
2014/04/14 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
大学生年度个人总结
2015/02/15 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
python中的sys模块和os模块
2022/03/20 Python