文章/答案/技术大牛

发布

社区首页 >问答首页 >重用多实例的优秀上载程序代码

问重用多实例的优秀上载程序代码
EN

Stack Overflow用户

提问于 2016-06-21 11:45:49

回答 1查看 201关注 0票数 1

我在一个页面中有多个优秀上传程序的实例。我不想重复/复制每个上传器实例的优秀上传脚本和模板，因为在我的例子中，这是很多代码(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

javascript

amazon-s3

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-06-21 22:34:29

下面是一个函数，您可以调用它来创建附加到唯一元素w/可变端点和模板的一组精细Uploader S3实例：

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

...and，您可以这样调用这个函数：

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

这就是一般的想法。当然，您可以修改代码以更好地满足您的需要。如果您需要跟踪上载器实例，您也可以在forEach循环中这样做。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37943525

复制

相似问题

问重用多实例的优秀上载程序代码
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重用多实例的优秀上载程序代码EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重用多实例的优秀上载程序代码
EN