Plupload의 '파일 추가'버튼이 최신 Chrome이나 OS X의 FF에서 실행되지 않는 이유는 무엇입니까?

Question

이 코드 내 레일 응용 프로그램에 Plupload을 실행하는 데 사용되는 :

<% content_for :deferred_js do %> 
    $("#uploader").pluploadQueue({ 
     runtimes : 'gears,html5,flash,browserplus,silverlight,html4', 
      url : '/uploads.js', 
      //browse_button : 'pickfiles', 
      max_file_size : '10mb', 
      chunk_size : '2mb', 
      unique_names : false, 
      container: 'uploader', 
      autostart: true, 
      //RoR - make sure form is multipart 
      //multipart: true, 

      // Specify what files to browse for 
      filters : [ 
      {title : "Image files", extensions : "jpg,gif,png,bmp"} 
      ], 

      // PreInit events, bound before any internal events 
      preinit : { 

     UploadFile: function(up, file) { 
    up.settings.multipart_params = {"upload[stage_id]" : compv.steps.selectedStage.getID(), "authenticity_token" : compv.tools.csrf_token()}; 
       } 
      }, 

      // Post init events, bound after the internal events 
      init : { 

       FilesAdded: function(up, files) { 
        // Called when files are added to queue 
        up.start(); 
       }, 


       FileUploaded: function(up, file, info) { 
        // Called when a file has finished uploading 
        console.log('[FileUploaded] File:', file, "Info:", info); 
        info.responseText = info.response; 
        compv.updateStepView('upload', info); 
        $('tr[data-upload] td.selectable-step').each(function(index){ 
         compv.steps.selectedUpload.primeUploadDisplay($(this)); 
        }); 
       }, 

       Error: function(up, args) { 
        // Called when an error has occured 
        up.stop(); 
        compv.tools.clientError(); 
       } 
      }, 

      // Flash settings 
      flash_swf_url : '/plupload/js/plupload.flash.swf', 

      // Silverlight settings 
      silverlight_xap_url : '/plupload/js/plupload.silverlight.xap' 
     }); 
     compv.steps.selectedUpload.uploader = $('div#uploader').pluploadQueue(); 
     //compv.steps.selectedUpload.uploader.init(); 

     // Client side form validation 
     $('form#new_upload').submit(function(e) { 
      var uploader = $('#uploader').pluploadQueue(); 

      // Validate number of uploaded files 
      if (uploader.total.uploaded == 0) { 
      // Files in queue upload them first 
      if (uploader.files.length > 0) { 
       // When all files are uploaded submit form 
       uploader.bind('UploadProgress', function() { 
       if (uploader.total.uploaded == uploader.files.length) 
        $('form').submit(); 
       }); 

       uploader.start(); 
      } else 
       $('div#upload-empty-dialog').dialog("open"); 
      e.preventDefault(); 
      } 
     }); 
    $('div#upload-empty-dialog').dialog({modal:true, autoOpen: false, minWidth: 325, buttons: { "Ok": function() { $(this).dialog("close"); } }}); 
    $('div#upload-cancel-dialog').dialog({modal:true, autoOpen: false, minWidth: 325}); 
<% end %> 
<div class="dialog" id="upload-empty-dialog" title="No Files"> 
<p>You must select files to upload first.</p> 
</div> 
<div class="dialog" id="upload-cancel-dialog" title="Cancel Uploading?"> 
<p>Do you want to stop uploading these images? Any images which have not been uploaded will be lost.</p> 
</div> 

이 원인이 될 수 있다는 것을 점프 분명 있나요?

Edit1 : Btw,이 업로드 양식을 시도 할 때 - http://jsfiddle.net/Atpgu/1/ - Chrome의 파일 추가 버튼이 모두 & FF 일 때 발생합니다. 그래서 내 JS와 관련이 있다고 생각합니다.

편집 2 : 이것은 compv의 정의입니다. 나는 그것이 약간 장황하다는 것을 안다. 그리고 나는 그것을 줄이려고했다. 그러나 중요한 것을 제거하는 위험에 처하지 않기로 결정했다.

var compv = { 
    exists: true, 
    tools: { exists: true, 
     csrf_param : null, 
     csrf_token : null}, 
    comments: { exists: true, 
      updateView: null, 
      selectImage: null, 
      upvote:null, 
      downvote:null, 
      showVotes:null, 
      getUploadID: function(element){ 
        return $(element).parents("li").attr("data-upload-id"); 
       }}, 
    steps: { exists: true, 
     selectFn:{}, 
     selectedClass: "selected-step", 
     selectableClass: "selectable-step", 
     selectedClient: { element: null, 
          id: null, 
        stepType: "client", 
        ajaxSuccess: null }, 
     selectedProject: { element: null, 
        id: null, 
        stepType: "project", 
          ajaxSuccess: null }, 
      selectedStage: { element: null, 
        id: null, 
        stepType: "stage", 
        ajaxSuccess: null, 
        getID: function(){ 
        return compv.steps.selectedStage.id; 
         }, 
        displayCompare: function(){ 
        window.open($(this).attr('data-url'), "_blank"); 
        }}, 
      selectedUpload: { element: null, 
        id: null, 
        stepType: "image", 
         primeUploadDisplay: null, 
        ajaxSuccess: null, 
        uploader: null, 
        noCloseDialog: false} } 
}; 

Answer 1

숨겨진 요소의 경우 Plupload가 올바르게 렌더링되지 않으므로 표시된 후 새로 고쳐야합니다.

var uploader = $('#uploader').pluploadQueue(); 
uploader.refresh(); 

난 크롬, 그것은 입력 용기 올바르게 Z- 인덱스를 설정하는 문제를 가지고, 발견 : 대화 상자가 개방 된 후 소정의 예에서 는 몇 줄의 코드가 추가되어야한다.

$('#uploader > div.plupload').css('z-index','99999'); 

Answer 2

나는이 오래된 질문 알고 있지만 Z- 인덱스 문제가 plupload (1.5.2)의 이후 버전에서 주변에 여전히 것 같다 : 그를 해결하려면, 단지 앞의 두 후 다른 줄을 추가합니다.

zIndex = parseInt(plupload.getStyle(browseButton, 'z-index'), 10); 
if (isNaN(zIndex)) { 
    zIndex = 0; 
} 

plupload.extend(browseButton.style, { 
    zIndex : zIndex 
}); 

plupload.extend(inputContainer.style, { 
    zIndex : zIndex - 1 
}); 

당신이 DOM을 볼 경우 것 :

문제는 특히 웹킷 브라우저 등 일을 중단하고의 "파일 추가"버튼의 z 인덱스를 변경 plupload.html5.js 코드로 인해 발생 style="z-index: 0;"이 앵커 요소 #uploader_browser 앵커 요소에 추가되고 "파일 추가"버튼이 포함 된 div는 -1 페이지의 Z- 인덱스를 가져 와서 효과적으로 페이지의 뒤로 숨 깁니다 (페이지 Z- 인덱스에 따라 다름).

이 문제를 해결하려면 위에서 언급 한 파일의 zIndex 값을 plupload div가 표시되는 페이지보다 높은 값으로 설정하십시오.

Answer 3

browse_button (= 파일 선택 버튼)의 css를 높은 z- 색인 (z- 색인 : 99999)으로 설정하면 Chrome으로이 문제를 더 쉽게 해결할 수 있습니다!

루시

Answer 4

CSS를 Deele의 솔루션은 좋지만 조금 더 나은이 방법을 수행하는 것입니다

$('#uploader > div.plupload input').css('z-index','99999'); 

버튼을 그런 식으로 가져가 파손되지는 않습니다 ...