我在页面中有多个上载良好的实例。我不想为每个上载器实例重复/复制上载器脚本和模板,因为在我的情况下(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版本可以采用上述方法吗?

最佳答案

您可以调用以下函数来创建一组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循环内进行。

07-24 09:45
查看更多