以编程方式在<input file =“”/>上调用IE 8中的更改事件

Question

Primefaces 5

我在代码中有<input type="file" class="ui-fileupload-choose>来上传文件。此input - 标记是从PrimeFaces组件<p:fileUpload>自动生成的。 我想要隐藏input元素的按钮，并使用我自己的样式按钮进行上传。

所以这是样式按钮。

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

这在FF，Chrome和IE9,10,11中有效。 但在IE8中，上传阶段没有任何反应。 ＆＃34;选择文件＆＃34;对话框显示。生成的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中的安全限制。

如果<{1}}

• <input type="file"/>
• display:none
• visbilty:hidden

如果手动调用（javascript点击），IE会阻止上传文件的请求。

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

以下是没有CSS额外风格的输入文件的样子：

解决方法是将输入文件移动到opacity: 0组件之外，这样它就可以松开CSS角色，并将其附加到带有按钮样式的span或div，这将导致实际单击文件输入。

按钮的

p:fileUpload

---

的javascript

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

有点链接：

现在为了让它看起来很漂亮并且在包括IE在内的所有浏览器上同时工作，应该添加一些CSS。 首先忽略前两个CSS类$(document).ready(function() { $('.ui-fileupload-buttonbar span input[type=file]').addClass('uploadBtn'); $('.btn-file').append($('.uploadBtn')); }); （颜色，填充等...）

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

---

为了显示错误消息，您可以对该输入文件使用onchange事件：

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

其中$('.uploadBtn').change(function() { var a = $('.ui-fileupload-content').html(); var b = $('#editUserUploadMessages').html(a); }) 是包含所有消息的div。

最后隐藏其他上传的文件：

#editUserUploadMessages

您可以在github和Demo

上找到一个小例子

Answer 2

对Hatem的出色答案的补充解决方案。 它正在使用此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>的位置。

Answer 3

1. 添加样式显示：无输入类型=＆＃34;文件＆＃34;
2. 在输入类型文件
的位置创建新文本框和按钮
3. 单击按钮，单击文件上载按钮
时创建js功能