为多实例重新使用精细的上传器代码

Question

我在一个页面中有多个优秀的上传器实例。我不想 repeat/duplicate 为每个上传器实例优化上传器脚本和模板，因为在我的例子中有很多代码（6-8 位上传器）。

我有以下内容：

$('#fine-uploader-manual-trigger-section1').fineUploaderS3({
    template: 'qq-template-manual-trigger-section1',
    autoUpload: false,
    debug: true,
    request: {
        endpoint: $("#s3_url").val(),
        accessKey: $("#access_key").val(),     
    },
});
$('#fine-uploader-manual-trigger-section2').fineUploaderS3({
    template: 'qq-template-manual-trigger-section2',
    autoUpload: false,
    debug: true,
    request: {
        endpoint: $("#s3_url").val(),
        accessKey: $("#access_key").val(),     
    },
});
.......
up to 6-8; as you can template code also repeat.

我的目标是使用以下方法重用脚本和可能的模板。我需要一些建议或指导可能是解决方案。当然，我正在努力避免代码重复。

$('#fine-uploader-manual-trigger-section1').createUploader('section1');
$('#fine-uploader-manual-trigger-section2').createUploader('section2');

function createUploader(section) {
   return new fineUploaderS3({
    template: 'qq-template-manual-trigger'+section,
    autoUpload: false,
    debug: true,
    request: {
        endpoint: $("#s3_url").val(),
        accessKey: $("#access_key").val(),     
    },
  });
}

我的问题是，如何实例化 .fineUploaderS3 并将其附加到 $('#fine-uploader-manual-trigger-section1')？ JQuery 版本是否可以使用上述方法？

Answer 1

这是一个函数，您可以调用它来创建一组附加到具有不同端点和模板的独特元素的 Fine Uploader S3 实例：

function createUploader(uploaderInfo) {
   return new qq.s3.FineUploader({
      element: document.querySelector(uploaderInfo.elementSelector),
      template: document.querySelector(uploaderInfo.templateSelector),
      request: {
         endpoint: uploaderInfo.endpoint
      }
   })
}

...您可以这样调用此函数：

[
   {
      elementSelector: '#element1', 
      templateSelector: '#template1', 
      endpoint: 'endpoint/1'
   },
   {
      elementSelector: '#element2', 
      templateSelector: '#template2', 
      endpoint: 'endpoint/2'
   }
   ...
].forEach(function(uploaderInfo) {
   createUploader(uploaderInfo)
})

这是一般的想法。当然，您可以修改代码以更符合您的需要。如果您需要跟踪上传器实例，您也可以在 forEach 循环内执行此操作。

为多实例重新使用精细的上传器代码

Re-use fine uploader code for multi instance

javascript

amazon-s3

fine-uploader