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 相关文章推荐
JS打开新窗口的2种方式
Apr 18 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 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中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
python实现网站的模拟登录
2016/01/04 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
班组长的岗位职责
2013/12/09 职场文书
管理工程专业求职信
2014/08/10 职场文书
地心历险记观后感
2015/06/15 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers