2013-03-14 3 views
1

하나의 버튼으로 fineupload 작업을하고 있지만 한 페이지에 여러 개의 업로드 버튼이 있습니다. 그러나이 좀 도와 줄 수있는 사람이 있습니까 ... 페이지의 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> 

만 두 번째 버튼은, 첫 번째가 완전히 사라 표시됩니다 ...이 동작하지 않습니다?

답변

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> 
+0

고맙습니다 !!! –

0

동일한 이름의 두 가지 전역 유효 기능이 있습니다. 두 번째 createUploader은 첫 번째 createUploader을 덮어 씁니다.

+0

예 ...하지만 어떻게해야합니까? 나는 이미 createUploader1() 함수와 createUploader2() 함수로 함수의 이름을 변경하려고 시도했다. 또한 window.onload = createUploader를 변경했는데 1과 2를 추가했다. 그러나 여전히 두 번째 함수의 버튼 만 보인다. . –

+0

솔직히, 몇 시간을 보냈는데 아무런 결과도없이 함수 뒤에 1과 2를 더했습니다 ... –

1

다음은 어떻게 수행 했는가? 처음에는 코드가 더 많지만 의미가 있습니다. 한 번에 원하는만큼 많은 업 로더를 배치 할 수 있습니다.

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'); 
       } 
      } 
     }); 
관련 문제