Question

我在页面中有多个精细上传器实例。我不想为每个上传器实例重复/复制精细的上传器脚本和模板，因为在我的情况下它是很多代码（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循环内执行此操作。

为多实例重用精细上传代码

1 个答案: