Primefaces p：fileUpload在IE 10中不起作用

Question

p：fileUpload中的更新屬性和onComplete在IE10中不起作用。在IE 9中sizeLimit屬性被忽略。有沒有人遇到過這種情況。

我已經打過電話號碼：通過使用頁上的onComplete屬性remotecommand：fileUoload但它看起來像連的onComplete並不在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

工作終於明白它在primefaces的錯誤。

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

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

固定在：

TargetVersion-4.0
TargetVersion-3.5.9

Answer 2

使用此CSS解決方法。我從the jQuery FileUpload component commit得出了這個問題。

.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

這似乎是絕對位置的問題。將其更改爲固定。它的工作原理就在我身邊：

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

Answer 4

這是固定在新的4.0版本Primefaces，但是如果你仍然對舊版本Primefaces，你可能還需要一個解決方法。

我能夠使用的OnStart屬性，它確實還工作在IE 10

創建包含被更新爲從fileUploadListener調用的方法的一部分值的隱藏字段文件上傳後更新。升級到IE10之後的FileUpload：在p的的OnStart屬性然後設置：文件上傳到類似以下內容：

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

我也有問題頁。 JavaScript錯誤開始發生（'XML文檔中的語法錯誤'）。

它有助於所述X-UA-兼容頭更改爲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

我不得不面對此問題與PF 5.1從PF 3遷移，由於this post我分辨：

這是生成的HTML代碼：

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

而這其中解決了這個問題的CSS：

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