2013-04-16 6 views
5

Atrybut aktualizacji i onComplete w p: fileUpload nie działa w IE10. W IE 9 atrybut sizeLimit jest ignorowany. Czy ktokolwiek natknął się na tę sytuację?Primefaces p: fileUpload nie działa w IE 10

Próbowałem nazywając p: remotecommand za pomocą atrybutu onComplete na str: fileUoload ale wygląda nawet onComplete nie działa w 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> 

Odpowiedz

3

użytkowania tego CSS obejścia. Wyprowadziłem to z the jQuery FileUpload component commit rozwiązanego problemu.

.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; 
} 
+1

wygląda na to, nawet z tej poprawki, Ajax aktualizację z atrybutu na 'p: komponent fileUpload' nie działa w IE 10. Czekam na to, ale sugestie są mile widziane. – Nick

0

Wydaje się, że problem dotyczy pozycji absolutnej. Zmień go na naprawiony. To działa na moją stronę:

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

Zostało to poprawione w nowej wersji 4.0 Primefaces, jednak jeśli nadal na starszej wersji Primefaces może nadal trzeba obejście.

udało mi się zaktualizować po przesyłania plików za pomocą atrybutu, który ma OnStart nadal działa w IE 10.

utworzyć ukryte pole, które zawiera wartość, która zostanie zaktualizowany w ramach metody zwanej od fileUploadListener . Następnie ustaw onStart atrybutu t: FileUpload do czegoś tak:

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

Mam również problemy z p: FileUpload po uaktualnieniu do IE10. Wystąpiły błędy JavaScript ("błąd składni w dokumencie XML").

Pomogło zmienić X-UA-Compatible nagłówek 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> 
0

musiałem zmierzyć się z tym problemem z PF 5.1 migrowały z PF 3 i dzięki this post Postanowiłem :

jest to kod html wygenerowany:

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

a to CSS, które rozwiązany ten problem:

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