修改blueimp jQuery File Upload插件：新添文件前置而非后置显示

阿华AIGC实验室

2026-5-19

解决jQuery-File-Upload待上传图片显示在列表顶部的问题

我之前做项目时遇到过完全一样的问题，当已上传几百张图片后，新添的待上传项藏在底部确实很影响操作体验，这里给你两个亲测有效的解决方案：

方案1：直接修改插件的`add`回调（推荐）

插件默认在add事件里把待上传的模板元素追加到列表底部，我们只需要把append改成prepend就行。如果是自己初始化的插件，直接在配置里覆盖add回调：

$('#fileupload').fileupload({
  // 你的其他配置（比如url、dataType等）
  add: function(e, data) {
    // 生成待上传文件的模板（插件内置方法，不用自己写）
    var $template = $(this.options.templates.file(data.files[0]));
    // 把模板插入到列表的最顶部，而不是底部
    $('.files').prepend($template);
    // 给Start按钮绑定上传触发事件
    $template.find('.start').on('click', function() {
      data.submit();
    });
  }
});

如果用的是插件自带的UI版本（jquery.fileupload-ui.js），也可以直接找到源码里的add方法，把其中的$container.append($files)改成$container.prepend($files)，效果是一样的。

方案2：监听`fileuploadadd`事件后移动元素

如果不想修改插件核心代码或者初始化配置，可以通过监听插件的fileuploadadd事件，在元素添加完成后把它移到列表顶部：

$('#fileupload').on('fileuploadadd', function(e, data) {
  // 这里用setTimeout确保元素已经渲染到DOM中
  setTimeout(function() {
    // 定位到刚添加的待上传元素（插件默认给这类元素加了.template-upload类）
    var $newUploadItem = $('.template-upload:last');
    // 移到列表最前面
    $newUploadItem.prependTo('.files');
  }, 0);
});