Javascript 页面上有多个fineupload实例_Javascript_Fine Uploader

Javascript 页面上有多个fineupload实例

javascript

Javascript 页面上有多个fineupload实例,javascript,fine-uploader,Javascript,Fine Uploader,我有一个按钮的fineupload工作，但我想有一个页面上的几个上传按钮。但是不能让它工作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Fine Uploader - Boostrapped Minimal Demo</title> <link href="/fineuploader/fineuploader-3.3

我有一个按钮的fineupload工作，但我想有一个页面上的几个上传按钮。但是不能让它工作

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fine Uploader - Boostrapped Minimal Demo</title>
    <link href="/fineuploader/fineuploader-3.3.0.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
      /* Fine Uploader
      -------------------------------------------------- */ 
      .qq-upload-list {
        text-align: left;
      }

      /* For the bootstrapped demos */
      li.alert-success {
        background-color:  #DFF0D8 ;
      }

      li.alert-error {
        background-color:  #F2DEDE ;
      }

      .alert-error .qq-upload-failed-text {
        display: inline;
      }
    </style>
  </head>
  <body>


    <div id="bootstrapped-fine-uploader-1"></div> 
    <script src="/fineuploader/fineuploader-3.3.0.js"></script>

    <script>
      function createUploader() {
        var uploader = new qq.FineUploader({
          element: document.getElementById('bootstrapped-fine-uploader-1'),
          request: {
            endpoint: 'example.php?naam=test.jpg'
          },
          text: {
            uploadButton: '<div><i class="icon-upload icon-white"></i> Test me now and upload a file</div>'
          },
          template: '<div class="qq-uploader span12">' +
                      '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                      '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                      '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
                      '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                    '</div>',
          classes: {
            success: 'alert alert-success',
            fail: 'alert alert-error'
          }
        });
      }

      window.onload = createUploader;
    </script>





    <div id="bootstrapped-fine-uploader-2"></div>
    <script src="/fineuploader/fineuploader-3.3.0.js"></script>

    <script>
      function createUploader() {
        var uploader = new qq.FineUploader({
          element: document.getElementById('bootstrapped-fine-uploader-2'),
          request: {
            endpoint: 'example.php?naam=test2.jpg'
          },
          text: {
            uploadButton: '<div><i class="icon-upload icon-white"></i> Upload jpg</div>'
          },
          template: '<div class="qq-uploader span12">' +
                      '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                      '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                      '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' + 
                      '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                    '</div>',
          classes: {
            success: 'alert alert-success',
            fail: 'alert alert-error'
          }
        });
      }

      window.onload = createUploader;
    </script>




  </body>
</html>


精细上传器-增强最小演示
/*精装机
-------------------------------------------------- */ 
.qq上传列表{
文本对齐：左对齐；
}
/*对于自举演示*/
成功{
背景色：#DFF0D8；
}
li.警告错误{
背景色：#F2DEDE；
}
。警报错误。qq上传文本失败{
显示：内联；
}
函数createUploader（）{
var uploader=new qq.FineUploader({
元素：document.getElementById（'bootstrapped-fine-uploader-1'），
请求：{
端点：“example.php？naam=test.jpg”
},
正文：{
uploadButton:“立即测试我并上载文件”
},
模板：“”+
“{dragZoneText}”+
“{uploadButtonText}”+
“{dropProcessingText}”+
“”+
'',
课程：{
成功：“警报成功”，
失败：“警报错误”
}
});
}
window.onload=createUploader；
函数createUploader（）{
var uploader=new qq.FineUploader({
元素：document.getElementById（'bootstrapped-fine-uploader-2'），
请求：{
端点：“example.php？naam=test2.jpg”
},
正文：{
上传按钮：“上传jpg”
},
模板：“”+
“{dragZoneText}”+
“{uploadButtonText}”+
“{dropProcessingText}”+
“”+
'',
课程：{
成功：“警报成功”，
失败：“警报错误”
}
});
}
window.onload=createUploader；

只显示第二个按钮，第一个按钮完全消失。。。有人能帮我吗？

您有两个同名的全局作用域函数。第二个

createUploader

覆盖第一个

createUploader

您正在为window.onload事件分配第一个函数，然后用第二个函数替换它。您应该只分配一次事件。此外，您不需要两个单独的脚本标记

  <body>

    <div id="bootstrapped-fine-uploader-1"></div> 
    <div id="bootstrapped-fine-uploader-2"></div>

    <script src="fineuploader-3.3.0.js"></script>

    <script>
      function createUploaders() {
        var uploader1 = new qq.FineUploader({
          element: document.getElementById('bootstrapped-fine-uploader-1'),
          request: {
            endpoint: 'example.php?naam=test.jpg'
          },
          text: {
            uploadButton: '<div><i class="icon-upload icon-white"></i> Test me now and upload a file</div>'
          },
          template: '<div class="qq-uploader span12">' +
                      '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                      '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                      '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
                      '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                    '</div>',
          classes: {
            success: 'alert alert-success',
            fail: 'alert alert-error'
          }
        });

        var uploader2 = new qq.FineUploader({
          element: document.getElementById('bootstrapped-fine-uploader-2'),
          request: {
            endpoint: 'example.php?naam=test2.jpg'
          },
          text: {
            uploadButton: '<div><i class="icon-upload icon-white"></i> Upload jpg</div>'
          },
          template: '<div class="qq-uploader span12">' +
                      '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                      '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                      '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' + 
                      '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                    '</div>',
          classes: {
            success: 'alert alert-success',
            fail: 'alert alert-error'
          }
        });
      }

      window.onload = createUploaders();
    </script>

  </body>


函数createUploaders（）{
var uploader1=新的qq.FineUploader({
元素：document.getElementById（'bootstrapped-fine-uploader-1'），
请求：{
端点：“example.php？naam=test.jpg”
},
正文：{
uploadButton:“立即测试我并上载文件”
},
模板：“”+
“{dragZoneText}”+
“{uploadButtonText}”+
“{dropProcessingText}”+
“”+
'',
课程：{
成功：“警报成功”，
失败：“警报错误”
}
});
var uploader2=新的qq.FineUploader({
元素：document.getElementById（'bootstrapped-fine-uploader-2'），
请求：{
端点：“example.php？naam=test2.jpg”
},
正文：{
上传按钮：“上传jpg”
},
模板：“”+
“{dragZoneText}”+
“{uploadButtonText}”+
“{dropProcessingText}”+
“”+
'',
课程：{
成功：“警报成功”，
失败：“警报错误”
}
});
}
window.onload=createUploaders（）；

我是这样做的。它最初更多的是代码，但有意义。您可以在一个页面上放置任意数量的上传程序

if (self.settings.businessAddresses !== null) {
                $.each(self.settings.businessAddresses, function (index, businessAddress) {
                    initFileUploader(self.settings.privateAddresses.length + index, businessAddress, "business", self.settings.allowedExtensions);
                });
            }

下面是“通用”文件上传器初始值设定项的实现。请注意，我使用的是2.1.2上传程序。我想在新版本中应该更容易些。我有extensions.js来支持每个单独文件的单独参数，以及一些其他改进，这些改进可能已经在新版本的文件上传器中得到了解决

// initiate uploader
 function initFileUploader(index, addressInstance, addressType, allowedFileExtensions) {
        var filesCount = 0;
        var uploadButtonSelector = '#triggerUpload-' + addressInstance.Id;
        var fileSelectButton = ".qq-upload-button-" + addressInstance.Id;
        var uploadedFilesErrorSelector = '#uploadedFilesError-' + addressInstance.Id;
        var nextButtonSelector = "#Next";
        var previousButtonSelector = "#Previous";
        var documentTypeSelector = "#DocumentTypeCode-" + addressInstance.Id;
        var prospectCacheKeySelector = "#ProspectCacheKey";

        // Set up the upload API
        var fileUploader = new qq.FileUploader({
            element: $('#filesToUpload-' + addressInstance.Id)[0],
            action: '/FileUploader',
            autoUpload: false,
            uploadButtonText: 'Select a file',
            allowedExtensions: allowedFileExtensions,
            sizeLimit: 1048576, // 1 MB = 1024 * 1024 bytes,
            template: '<div class="qq-uploader">' + //  Allow the boostrap styles
            '<div class="qq-upload-button-' + addressInstance.Id + ' btn btn-success" style="width: 100px">{uploadButtonText}</div>' +
            '<ul class="qq-upload-list-' + addressInstance.Id + '" style="margin-top: 10px; text-align: center;"></ul>' +
            '<pre class="qq-upload-drop-area-' + addressInstance.Id + '"><span>{dragText}</span></pre>' +
            '</div>',
            failUploadText: '',
            fileTemplate: '<li>' +
            '<span class="qq-document-type-' + addressInstance.Id + '"></span>' +
            '<span class="qq-upload-file-' + addressInstance.Id + '">10870</span>' +
            '<a class="qq-upload-cancel-' + addressInstance.Id + '" href="#"> Remove</a>' +
            '<div class="qq-progress-bar-' + addressInstance.Id + '"></div>' +
            '<span class="qq-upload-spinner-' + addressInstance.Id + '" style="display: none;"></span>' +
            '<span class="qq-upload-finished-' + addressInstance.Id + '"></span>' +
            '<span class="qq-upload-size-' + addressInstance.Id + '" style="display: none;"></span>' +
            '<span class="qq-upload-failed-text-' + addressInstance.Id + '"></span>' +
            '</li>',
            classes: {
                button: 'qq-upload-button-' + addressInstance.Id + '',
                drop: 'qq-upload-drop-area-' + addressInstance.Id + '',
                dropActive: 'qq-upload-drop-area-active-' + addressInstance.Id + '',
                dropDisabled: 'qq-upload-drop-area-disabled-' + addressInstance.Id + '',
                list: 'qq-upload-list-' + addressInstance.Id + '',
                progressBar: 'qq-progress-bar-' + addressInstance.Id + '',
                file: 'qq-upload-file-' + addressInstance.Id + '',
                documentType: 'qq-document-type-' + addressInstance.Id + '',
                applicationId: 'qq-application-id-' + addressInstance.Id + '',
                addressId: 'qq-address-id-' + addressInstance.Id + '',
                addressType: 'qq-address-type-' + addressInstance.Id + '',
                spinner: 'qq-upload-spinner-' + addressInstance.Id + '',
                finished: 'qq-upload-finished-' + addressInstance.Id + '',
                size: 'qq-upload-size-' + addressInstance.Id + '',
                cancel: 'qq-upload-cancel-' + addressInstance.Id + '',
                failText: 'qq-upload-failed-text-' + addressInstance.Id + '',
                success: 'alert-success',
                fail: 'alert-error',
                successIcon: null,
                failIcon: null
            },
            onError: function (id, fileName, errorReason) {
                alert(errorReason);
            },
            onComplete: function (id, fileName, response) {
                filesCount--;
                if (response.success) {
                    $('<input>').attr({
                        type: 'hidden',
                        name: 'UploadedFileIds',
                        value: response.cacheKey
                    }).appendTo('form');
                }
                // Check that we have finished downloading all files
                if (fileUploader.getInProgress() == 0) {
                    // Re-enable the Next button
                    $(nextButtonSelector).removeAttr('disabled');
                    $(previousButtonSelector).removeAttr('disabled');
                    $(uploadButtonSelector).css('visibility', 'hidden');
                }
            },
            onSubmit: function (id, fileName) {
                filesCount++;
                fileUploader._options.params[id] =
                    {
                        documentType: $("select" + documentTypeSelector)[0].value,
                        documentTypeText: $("select" + documentTypeSelector)[0].options[$("select" + documentTypeSelector)[0].selectedIndex].text,
                        addressId: addressInstance.Id,
                        addressType: addressType,
                        applicationId: addressInstance.ApplicationId,
                        prospectCacheKey: $(prospectCacheKeySelector).val()
                    };

                // $(documentTypeSelector).prop('selectedIndex', 0);

                // $(fileSelectButton).attr('disabled', 'disabled');

                // Show the upload button
                if ($(uploadButtonSelector).css('visibility') === 'hidden') {
                    $(uploadButtonSelector).css('visibility', 'visible');
                }

                // Hide the error for mandatory files upload
                $(uploadedFilesErrorSelector).css('display', 'none');
            },
            onCancel: function (id, fileName) {
                filesCount--;
                if (filesCount === 0) {
                    $(uploadButtonSelector).css('visibility', 'hidden');
                }
            }
        });

//启动上传程序
函数initFileUploader（索引、addressInstance、addressType、allowedFileExtensions）{
var filescont=0；
var uploadButtonSelector='#triggerUpload-'+addressInstance.Id；
var fileSelectButton=“.qq上传按钮-”+addressInstance.Id；
var UploadedFileErrorSelector='#UploadedFileError-'+addressInstance.Id；
var nextButtonSelector=“#Next”；
var previousButtonSelector=“#Previous”；
var documentTypeSelector=“#DocumentTypeCode-”+addressInstance.Id；
var ProspectCacheKey选择器=“#ProspectCacheKey”；
//设置上传API
var fileUploader=new qq.fileUploader({
元素：$（'#filesToUpload-'+addressInstance.Id）[0]，
操作：'/FileUploader'，
自动上载：false，
uploadButtonText:“选择一个文件”，
allowedExtensions:allowedFileExtensions，
sizeLimit:1048576，//1MB=1024*1024字节，
模板：“”+//允许boostrap样式
“{uploadButtonText}”+
“'+
“{dragText}”+