Primefaces p: fileUpload non funziona in IE 10

Question

Attributo di aggiornamento e onComplete in p: fileUpload non funziona in IE10. In IE 9 l'attributo sizeLimit viene ignorato. Qualcuno si è imbattuto in questa situazione.

Ho provato a chiamare p: remotecommand utilizzando attributo onComplete a p: fileUoload ma sembra che anche onComplete non funziona in IE 10

<h:form id="file" enctype="multipart/form-data"> 
     <p:outputLabel value="Test........"></p:outputLabel> 
     <p:fileUpload label="Browse..." description="Select PDF file" 
      auto="true" sizeLimit="500000" 
      oncomplete="refreshData()" 
      onstart="alert('test');" mode="advanced" 
      fileUploadListener="#{fileUpload.handleFileUpload}" 
      allowTypes="/(\.|\/)(pdf|png)$/"> 

     </p:fileUpload> 
     <p:inputText value="#{fileUpload.test}" id="test" /> 
     <p:remoteCommand name="refreshData" action="#{fileUpload.setData}" 
      update="test"></p:remoteCommand> 
    </h:form> 

Answer 1

finalmente capito che la sua un bug in primefaces.

http://forum.primefaces.org/viewtopic.php?f=3&t=28860#p94845

http://code.google.com/p/primefaces/issues/detail?id=5355

fissato in:

TargetVersion-4.0
TargetVersion-3.5.9

Answer 2

utilizzare questa soluzione CSS. Ho ricavato questo da the jQuery FileUpload component commit risolto questo problema.

.fileinput-button input { 
    -moz-transform : none !important; 
    border : none !important; 
    border-width : 0 !important; 
    transform : translate(-300px, 0) scale(4) !important; 
    font-size : 23px !important; 
} 
* + html .fileinput-button { 
    line-height : none !important; 
    padding : 2px 15px !important; 
} 

Answer 3

Sembra essere un problema con la posizione assoluta. Cambialo su fisso. Funziona sul mio fianco:

.fileupload-buttonbar .ui-button input { 
    ... 
    position       : fixed; 
    ... 
} 

Answer 4

Questo è fissato nella nuova release 4.0 primefaces, se siete ancora in una versione precedente di primefaces si potrebbe ancora bisogno di una soluzione alternativa.

sono stato in grado di aggiornare dopo un caricamento di file utilizzando l'attributo OnStart che non funzionano ancora in IE 10.

Creare un campo nascosto che contiene un valore che viene aggiornato come parte del metodo chiamato dal fileUploadListener . Quindi impostare l'attributo OnStart della p: FileUpload a qualcosa di simile al seguente:

function checkUpload() { 

    //this should call a p:remoteCommand that refreshes your hidden value 
    refreshHiddenValue(); 

    var hiddenFieldValue = $('#hiddenFieldId').val(); 
    if(hiddenFieldValue) { 
     //this should call a p:remoteCommand that refreshes the 
     //sections you want refreshed after the upload has finished 
     refreshSections(); 
    } 
    else { 
     setTimeout(checkUpload, 1000); 
    } 
} 

Answer 5

Ho anche problemi con p: FileUpload dopo l'aggiornamento a IE10. Cominciarono a verificarsi gli errori JavaScript ('errore di sintassi nel documento XML').

ha contribuito a cambiare il intestazione X-UA-Compatible per IE = EmulateIE9:

<h:head> 
    <f:facet name="first"> 
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    </f:facet> 
<h:head> 

Answer 6

ho dovuto affrontare questo problema con PF 5.1 migrato da PF 3 e grazie alla this post ho risolto :

questo è il codice html generato:

<div class="ui-fileupload-buttonbar ui-widget-header ui-corner-top"> 
    <span class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-fileupload-choose" > 
     <span class="ui-button-icon-left ui-icon ui-c ui-icon-plusthick"></span> 
     <span class="ui-button-text ui-c">upload</span> 
     <input name="upload" type="file"> 
    </span> 
</div> 

e questo il CSS che ha risolto questo problema:

.ui-fileupload-buttonbar .ui-fileupload-choose input 
{ 
    position:absolute; 
    top:0; 
    right:0; 
    margin:0; 
    border:solid transparent; 
    border-width:0 0 1px 1px; 
    opacity:0; 
    filter:alpha(opacity=0); 
    -o-transform:translate(250px, -50px) scale(1); 
    direction:ltr; 
    cursor:pointer; 
    z-index:5000; 
    width:100%; 
    height: 20px;  
} 

.ui-button { 
    position: relative; 
    overflow: hidden; 
} 
.ui-button input[type=file] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    min-width: 100%; 
    min-height: 100%; 
    font-size: 100px; 
    text-align: right; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    outline: none; 
    background: white; 
    cursor: inherit; 
    display: block; 
}