使用blueimp jquery-file-upload无法预加载现有文件，出现null调用错误

这个错误我之前做类似功能时碰到过，核心原因其实很清晰：你调用$(this).fileupload('option', 'done')拿到的结果是null，后续的.call()自然就会抛出类型错误。

为什么会出现这个问题？ #

blueimp的jQuery File Upload处理done事件有两种方式：

1. 初始化时配置done选项：这种情况下fileupload('option', 'done')能获取到你设置的回调函数。
2. 通过事件绑定fileuploaddone：这是basic-plus示例里常用的方式，但这种绑定不会把回调函数存入done选项中，所以你用option('done')获取时就会得到null。

你的代码试图调用$(this).fileupload('option', 'done').call(...)，但因为你是用事件绑定的方式处理上传完成逻辑，这个选项值为空，就触发了错误。

解决办法 #

有两种简单的修复方案，选哪种都可以：

方式一：直接手动处理预加载结果

既然done选项不存在，我们可以跳过调用它，直接在ajax的done回调里手动渲染现有图片，和你处理上传完成后的逻辑保持一致：

$.ajax({
  // Uncomment the following to send cross-domain cookies:
  //xhrFields: {withCredentials: true},
  url: $('#fileupload').fileupload('option', 'url'),
  dataType: 'json',
  context: $('#fileupload')[0]
}).always(function () {
  $(this).removeClass('fileupload-processing');
}).done(function (result) {
  // 复制你处理上传完成的逻辑即可
  $.each(result.files, function (index, file) {
    // 示例：创建图片元素并添加到页面
    if (file.thumbnailUrl) {
      $('<img class="thumbnail">').attr('src', file.thumbnailUrl).appendTo('#files');
    }
    // 同时添加文件名信息
    $('<p>').text(file.name).appendTo('#files');
  });
});

方式二：初始化时显式配置done选项

如果你想复用现有的done处理逻辑，可以在初始化fileupload时，把处理函数配置到done选项里，而不是只绑定事件：

// 初始化fileupload时
$('#fileupload').fileupload({
  url: '你的上传接口地址',
  // 其他配置项...
  done: function (e, data) {
    // 这里放你原来在fileuploaddone事件里的处理逻辑
    $.each(data.result.files, function (index, file) {
      // 渲染图片和文件名的代码
    });
  }
});

// 此时你的预加载代码就能正常工作了
$.ajax({
  // ... 你的原有配置 ...
}).done(function (result) {
  $(this).fileupload('option', 'done')
    .call(this, $.Event('done'), {result: result});
});

额外注意点 #

要确保后端返回的JSON结构符合blueimp的预期，也就是包含files数组，每个文件对象要有name、thumbnailUrl（图片场景）等必要字段，这样处理逻辑才能正常执行。

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