呼叫改变事件在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>。