bootstarp fileinput.js 删除文件成功触发函数,如何实现
时间: 2023-11-28 09:49:31 浏览: 397
你可以使用 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()` 来输出一些信息,也可以调用其他函数来处理删除文件成功后的操作。
阅读全文