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 分栏效果实现代码
Aug 29 Javascript
jQuery 创建Dom元素
May 07 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
JavaScript验证知识整理
Mar 24 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
基于Vue实现支持按周切换的日历
Sep 24 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文档更新介绍
2011/07/22 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
vue组件实现进度条效果
2018/06/06 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
如何获得EntityManager
2014/02/09 面试题
医药专业推荐信
2013/11/15 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
安全保证书怎么写
2015/02/28 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫