呼叫改變事件在IE8 programmaticaly

Question

Primefaces 5

我在代碼<input type="file" class="ui-fileupload-choose>上傳的文件。此input -Tag自動從PrimeFaces組件<p:fileUpload>生成。 我想隱藏input元素的按鈕，並使用我自己的樣式化按鈕進行上傳。

所以這是風格化的按鈕。

<input type="button" onclick="$('#formId\\:uploaderId .ui-fileupload-choose input').click();"> 

這確實功能FF，Chrome和IE9，10，11 但在IE8什麼也沒有發生在上載階段。顯示「選擇文件」對話框。生成的input file具有JQuery更改事件。我相信這個事件不會被調用，因爲如果我點擊input file按鈕，它會在所有瀏覽器中進行。

我已經試過

<input type="button" onclick="$('#formId\\:uploaderId .ui-fileupload-choose input').click(); #formId\\:uploaderId ui-fileupload-choose input').trigger('change');"> 

，但它並不能幫助。

而且我已經試過

$('#formId\\:uploaderId .ui-fileupload-choose input').change(function() { 
    // Cause the change() event 
    // to be fired in IE8 et. al. 
    //some checks against recursion. 
    alert("I'm in change"); 
    $('#formId\\:uploaderId .ui-fileupload-choose input').change();    
}); 

在變化的函數被調用，但它也沒有幫助。

在這種情況下我該怎麼辦？

Answer 1

這是由於IE中的安全限制。

當有<input type="file"/>具有任

的

• display:none
• visbilty:hidden
• opacity: 0

IE塊上載文件的請求，如果它被手動地稱爲（JavaScript的點擊）。

在PrimeFaces案例中，輸入文件有opacity: 0。

這裏的輸入文件看起來像沒有CSS額外的口味：

的變通方法是把輸入文件外p:fileUpload組件，因此它可以鬆CSS角色，並將其追加到帶按鈕樣式的跨度或div，這將導致實際點擊文件輸入。

按鈕

<span class="btn btn-primary btn-file"> 
    <i class="fa fa-upload"></i> Upload File 
</span> 

---

的JavaScript

$(document).ready(function() { 
    $('.ui-fileupload-buttonbar span input[type=file]').addClass('uploadBtn'); 
    $('.btn-file').append($('.uploadBtn')); 
}); 

東西此鏈接：

現在爲了讓它看起來很好，並在包括IE在內的所有瀏覽器上同時工作，應該添加一些CSS。 首先忽略前兩個CSS類btn btn-primary（顏色，填充等）

的btn-file是自定義特技：

.btn-file { 
    position: relative; 
    overflow: hidden; 
} 

.btn-file input[type=file] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    min-width: 100%; 
    min-height: 100%; 
    font-size: 999px; 
    text-align: right; 
    filter: alpha(opacity=0); 
    opacity: 0;   
    cursor: inherit; 
    display: block; 
} 

最終的結果是，在後臺輸入文件的按鈕：

的p:fileUpload部件應該被隱藏：

<p:fileUpload style="display: none" /> 

---

爲了顯示錯誤信息，您可以使用onchange事件爲輸入文件：

$('.uploadBtn').change(function() { 
    var a = $('.ui-fileupload-content').html(); var b = $('#editUserUploadMessages').html(a); 
}) 

哪裏#editUserUploadMessages是包含所有消息的股利。

最後隱藏其他上傳的文件：

#editUserUploadMessages .ui-fileupload-files { 
    display: none; 
} 

你可以找到github一個小例子和哈特姆的出色答卷一個Demo

Answer 2

1. 添加樣式display：none來輸入類型=「文件」
2. 在輸入類型文件的位置創建新的文本框和按鈕
3. 創建js函數單擊按鈕單擊文件的按鈕時上傳

Answer 3

其他的解決方案。 它使用這個SO answer。

您可以使用html標記<label>將點擊轉發到輸入按鈕。

<h:form id="formId" > 
<style> 

#formId\:uploaderId .ui-fileupload-buttonbar { 
    position: absolute; 
    left: -10000px; 
} 

#formId\:uploaderId .ui-fileupload-content { 
    border: none; 
} 
</style> 

<p:fileUpload id="uploaderId" mode="advanced" auto="true" allowTypes="..." fileLimit="..."> 


<label for="formId:uploaderId_input"> 
    <span class="fa fa-upload" />  
</label> 
</h:form> 

這樣的誤差將在點被示出，其中被包括<p:fileUpload>。