对多实例重复使用精美的上传器代码 [英] Re-use fine uploader code for multi instance

问题描述

我在一个页面中有多个上载实例.我不想为每个上载器实例重复/复制上载器脚本和模板，因为在我的情况下(6-8个上载器)有很多代码.

I am have multiple instances of fine uploader in a page. I do not want to repeat/duplicate fine uploader script and template for every uploader instance as it is lot of code in my case (6-8 uploader).

我有以下内容:

$('#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. 

我的目标是重新使用脚本，并可能使用以下方法创建模板.我需要一些建议或指导，这可能是解决方案.当然，我正在尝试避免代码重复.

My goals is re-use script and possibly template using below approach. I need some advice or direction what might be solution. Certainly,I am trying avoid code duplication.

$('#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版本可以采用上述方法吗?

My question, how to instantiate .fineUploaderS3 and attach that to $('#fine-uploader-manual-trigger-section1') ? Is above approach possible with the JQuery version?

推荐答案

在此处，您可以调用该函数来创建一组Fine Uploader S3实例，这些实例附加到具有不同端点和模板的唯一元素上:

Here is a function that you can call to create a set of Fine Uploader S3 instances attached to unique elements w/ varying endpoints and templates:

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

...，您可以这样调用此函数:

...and you can call this function like this:

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

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

That's the general idea. You may, of course, modify the code to more closely suit your needs. If you need to track uploader instances, you can do that inside of the forEach loop too.

这篇关于对多实例重复使用精美的上传器代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！