प्लसलोड में 'फ़ाइलें जोड़ें' बटन क्यों नहीं है ओएस एक्स पर नवीनतम क्रोम या एफएफ में आग लगती है?

Question

यह है कोड मेरी रेल App में 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/ - दोनों क्रोम & एफएफ पर मेरे लिए जोड़ने फ़ाइलें बटन आग - तो मुझे लगता है कि यह मेरे जे एस के साथ कुछ है, मैं बस नहीं जानता कि क्या।

संपादित 2: compv की परिभाषा यही है। मुझे पता है कि यह थोड़ा verbose है, और मैं इसे कम करने जा रहा था - लेकिन कुछ महत्वपूर्ण हटाने के जोखिम पर नहीं फैसला किया।

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

प्लूपलोड छुपा तत्वों के लिए सही ढंग से प्रतिपादन नहीं कर रहा है, यही कारण है कि इसे दिखाए जाने के बाद रीफ्रेश किया जाना चाहिए।

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 
}); 

आप डोम देखते हैं, तो आप:

समस्या plupload.html5.js जो विशेष रूप से वेबकिट ब्राउज़रों के लिए और ऐसा करने में चीजें टूट जाता है "फ़ाइलें जोड़ें" बटन का z- सूचकांक में परिवर्तन में कोड के कारण होता है देखें कि style="z-index: 0;"#uploader_browser एंकर तत्व में जोड़ा गया है, और "फ़ाइलें जोड़ें" बटन वाला div एक जेड-इंडेक्स -1 प्राप्त करता है जो प्रभावी रूप से पृष्ठ के पीछे इसे छुपाता है (पाठ्यक्रम के आपके पृष्ठों जेड-इंडेक्स के आधार पर)।

इसे ठीक करने के लिए मैंने उपरोक्त फ़ाइल में zIndex मान को उस पृष्ठ से अधिक कुछ सेट किया है जिस पर प्लूपलोड div प्रदर्शित किया जा रहा था।

Answer 3

आप अपने ब्राउजर_बटन (= फाइल बटन का चयन करें) के सीएसएस को उच्च जेड-इंडेक्स (जेड-इंडेक्स: 99 999) में सेट करके क्रोम के साथ इस समस्या को हल कर सकते हैं!

लुसियान

Answer 4

सीएसएस के साथ Deele के समाधान अच्छा है, लेकिन थोड़ा बेहतर यह इस तरह से करना है:

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

बटन की तरह मंडराना टूट नहीं किया जाएगा ...