javascript删除服务器文件,Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置...

在bootstrap fileinput中移除预览文件时可以通过配置initialpreviewconfig: [ { } ] 来同步删除服务器上的文件和记录。但新上传的文件则需要其他方式来同步删除服务器记录。

在配置中遇到的一些问题,记录一下。

b_0_201906022005242575.png

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 上传新文件移除时触发服务器同步删除的配置 ,希望对大家有所帮助

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 fileinput 插件提供的 `filedeleted` 事件来实现删除文件成功后触发函数的功能。具体步骤如下: 1. 首先,在 HTML 文件中引入 fileinput 插件的 CSS 和 JS 文件,以及 jQuery 库文件。 ```html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" integrity="sha512-od4s1xKwGJ3Q0I0/sBpY0v+e9BdWqUzF6v7HnMjZ0z5ug9zB0qj7hZ5vq+ZnT2F8J2xkY5L6HEM8/5YSyZxS6Q==" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-7sP1Ic7y+qzZaD9TzYBmgf7SKZrLoJ6kKQ6v5UPvXtMfhgD/ABeb5h1fSZ+YpQyJgMfjfP2oSUkK6Sg8AcKQFw==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/piexif.min.js" integrity="sha512-4T0JlW/ewP4I8DzEKR6rDf5BjA1g/9L+e/UWAkRd+6D/aC9WAVg2xUoknI5Z/KuFUvE90UqiJyZ0QXJi8j/7qg==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/sortable.min.js" integrity="sha512-8R+jWPdN0wKz1v6o3PQ7Gj8fWZLgX6r8RP3a45yUdE1Tl9A2jWJhIPOO8m9p9tSvXj2WvJ9zeWPA3zS2KXU8BQ==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/purify.min.js" integrity="sha512-Xt0yf7JiZzK9jD5Wj1iJLXNQWpQm1Z6jZv4Fwqy0r0wqMAiQZCfWYs8iY0cX4BQJZUp+0lXs3d2x2W/4IyvR7w==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js" integrity="sha512-u3vzW5T3HJr6b2M+0Z1h1iZzBKv6lZlEw2YvUOJUzj2UQJGxvNcS3VZn8eA5D6JnyFgwz1x9aG6Qz7w8QY4Gvw==" crossorigin="anonymous"></script> ``` 2. 接着,在 JS 文件中初始化 fileinput 插件,并绑定 `filedeleted` 事件。 ```javascript $('#my-fileinput').fileinput({ // 配置参数 }); $('#my-fileinput').on('filedeleted', function(event, key) { // 删除文件成功后触发的函数 }); ``` 其中,`#my-fileinput` 是你的 fileinput 元素的 ID,`filedeleted` 事件将在删除文件成功后触发,`key` 参数表示被删除文件的索引。你可以在函数中使用 `console.log()` 来输出一些信息,也可以调用其他函数来处理删除文件成功后的操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值