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 相关文章推荐
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
vue写一个组件
Apr 09 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
js消除图片小游戏代码
Dec 11 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 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实现的漂亮分页方法
2014/04/17 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
Python爬取三国演义的实现方法
2016/09/12 Python
flask session组件的使用示例
2018/12/25 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python获取交互式ssh shell的方法
2019/02/14 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
驻村工作先进事迹
2014/08/14 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
物业接待员岗位职责
2015/04/15 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题