jQuery Ajax File Uploader Widget多图预览顺序倒置问题求助

问题原因 #

该组件默认将新选择的文件预览节点插入到预览容器的最开头，所以会出现后选的图片排在前面、顺序倒置的情况。

修复方案 #

方案1：修改组件源码（最直接，一次修改永久生效） #

1. 打开你项目中引入的uploader.js源文件
2. 搜索定位到添加预览节点的代码行，你会找到类似下面的代码：

// 原代码逻辑
this.options.previewContainer.prepend(preview);

3. 把上面代码里的prepend替换成append即可，修改后代码为：

// 修改后代码
this.options.previewContainer.append(preview);

prepend的作用是插入到容器的最前面，append的作用是插入到容器的最后面，替换完成后先选的文件就会排在最前面，后选的排在后面，顺序即可恢复正常。

方案2：不改源码，初始化时通过配置修复 #

如果不想修改组件源码，可以在初始化上传组件的时候，通过回调事件手动调整预览顺序，初始化代码参考如下：

$('#你的上传按钮选择器').uploader({
  // 你原来的其他配置保持不变
  onFileAdded: function(file, preview) {
    // 直接把新生成的预览节点加到预览容器最后
    $('.你的预览容器选择器').append(preview);
    // 阻止组件默认的插入行为
    return false;
  }
});

只需替换代码里的上传按钮、预览容器对应选择器即可生效。

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