1

我有一个按钮，但我想在一页上有几个上传按钮。但无法让它工作......

<!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>

仅显示第二个按钮，第一个按钮完全消失...有人可以帮助我吗？

4

3 回答 3

2

您将第一个函数分配给 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>
于 2013-03-14T22:11:19.517 回答
1

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

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

这是“通用”文件上传器初始化程序的实现。请注意，我使用的是 Fine Uploader 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');
                }
            }
        });
于 2013-04-08T14:37:56.593 回答
0

您有两个同名的全局范围函数。第二个createUploader覆盖第一个createUploader。

于 2013-03-14T20:43:51.593 回答