如何在jQuery.filer上传文件后重置图片上传字段？

你尝试的reset、refresh、destroy单独使用效果不佳，是因为jQuery.filer的destroy只会移除插件实例，但不会重置原生文件输入；reset方法在部分场景下无法彻底清空UI和输入值。正确的做法是销毁实例 -> 清空原生输入 -> 重新初始化插件，具体代码可以放在请求成功的回调里：

// 示例：请求成功后的处理逻辑
$.ajax({
  url: '你的上传接口',
  type: 'POST',
  // 其他请求配置...
  success: function(res) {
    // 1. 销毁已有的jQuery.filer实例
    $('#image_upload').filer('destroy');
    
    // 2. 清空原生文件输入框的内容
    $('#image_upload').val('');
    
    // 3. 重新初始化jQuery.filer插件
    $('#image_upload').filer({
      limit: 3,
      maxSize: 3,
      extensions: ['jpg', 'jpeg', 'png', 'gif', 'psd'],
      changeInput: true,
      showThumbs: true,
      addMore: true,
      captions: {
        button: "Choose Images",
        feedback: "Choose Images To Upload",
        removeConfirmation: "Are you sure you want to remove this file?",
      }
    });
  }
});

如果你不想重复写初始化代码，可以把初始化逻辑封装成函数，让代码更简洁：

function initImageFiler() {
  $('#image_upload').filer({
    limit: 3,
    maxSize: 3,
    extensions: ['jpg', 'jpeg', 'png', 'gif', 'psd'],
    changeInput: true,
    showThumbs: true,
    addMore: true,
    captions: {
      button: "Choose Images",
      feedback: "Choose Images To Upload",
      removeConfirmation: "Are you sure you want to remove this file?",
    }
  });
}

// 页面加载时初始化插件
$(function() {
  initImageFiler();
});

// 请求成功后执行重置逻辑
$.ajax({
  // 请求配置...
  success: function(res) {
    $('#image_upload').filer('destroy');
    $('#image_upload').val('');
    initImageFiler();
  }
});

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