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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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
咖啡的植物学知识
2021/03/03 咖啡文化
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
分享几道你可能遇到的python面试题
2017/07/24 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Django中modelform组件实例用法总结
2020/02/10 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
德国网上宠物店:Zoobio
2018/05/23 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
科研课题实施方案
2014/03/18 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
家长对学生的评语
2014/04/18 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
个人安全生产责任书
2014/07/28 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
人事代理委托书
2014/09/27 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
Python内置的数据类型及使用方法
2022/04/13 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB