文件上传图标切换需求：上传中显示加载图标，完成后显示对勾图标

结合你给出的按钮代码，我们可以通过监听文件上传的不同阶段事件，来实现图标在「附件→加载中→对勾」之间的切换。从你用的fileupload类来看，应该是基于jQuery File Upload插件实现的上传功能，下面是具体的实现方案：

首先明确三个状态对应的Font Awesome图标：

• 初始状态：fa-paperclip（附件图标）
• 上传中：fa-spinner fa-spin（旋转加载图标）
• 上传完成：fa-check（对勾图标）

1. 优化按钮结构（可选但更便捷） #

给图标元素添加专属类名，方便后续快速定位修改：

<button class="btn btn-primary fileinput-button" data-tooltip="tooltip" data-original-title="Import">
  <i class="fa fa-paperclip upload-status-icon" aria-hidden="true"></i>
  <input id="fileupload" class="fileupload" type="file" name="files">
</button>

2. 编写状态切换逻辑 #

通过绑定File Upload的核心事件，实现图标的动态切换：

// 初始化文件上传组件
$('#fileupload').fileupload({
  url: '你的实际上传接口地址', // 替换为项目中的上传API
  dataType: 'json'
})
// 文件开始上传时，切换为加载图标
.on('fileuploadsend', function(e, data) {
  $('.upload-status-icon')
    .removeClass('fa-paperclip')
    .addClass('fa-spinner fa-spin');
})
// 上传成功完成后，切换为对勾图标
.on('fileuploaddone', function(e, data) {
  $('.upload-status-icon')
    .removeClass('fa-spinner fa-spin')
    .addClass('fa-check');
  
  // 可选需求：如果希望对勾图标显示一段时间后恢复初始状态
  // setTimeout(() => {
  //   $('.upload-status-icon')
  //     .removeClass('fa-check')
  //     .addClass('fa-paperclip');
  // }, 2000);
})
// 可选：处理上传失败场景，切换为错误提示图标
.on('fileuploadfail', function(e, data) {
  $('.upload-status-icon')
    .removeClass('fa-spinner fa-spin')
    .addClass('fa-exclamation-circle');
});

注意事项 #

• 确保项目中已经引入了jQuery、jQuery File Upload脚本，以及Font Awesome图标库
• 如果是多文件上传场景，需要针对单个文件的上传状态做更细致的绑定（比如通过文件ID关联图标），但单文件场景下上述代码完全适用

内容的提问来源于stack exchange，提问作者Zaoldyeck