在<输入文件>的IE8中调用更改事件programmaticaly [英] Call change event in IE8 on <input file> programmaticaly

问题描述

Primefaces 5

我有< input type =fileclass =ui-fileupload-choose> -Tag是从PrimeFaces组件自动生成的< p：fileUpload> 我想要隐藏 input 元素的按钮，并使用我自己的样式化按钮进行上传。

 < input type =buttononclick =$（'＃formId点击（）;> 
  

在FF，Chrome和IE9,10,11中都有这样的功能
但是在IE8上没有任何反应，显示选择文件对话框，生成的输入文件有JQuery变更事件，我相信这个事件不会被调用，因为如果我点击输入文件按钮，它会进入所有的浏览器。

我试过了

 < input type =buttononclick = $ （'＃formId \\：uploaderId .ui-fileupload-choose input'）。click（）; （'change'）;> 
  

$
$ b

我也试过（）（）{
//导致change（）事件
（$ {code> $（'＃formId \\：uploaderId .ui-fileupload-选择输入' //在IE8等中被解雇
//对递归进行一些检查
alert（我在变）;
$（'＃formId \\ ：uploaderId .ui-fileupload-choose input'）。change（）;
}）;


<

在这种情况下我能做什么？

当有< input
$ b



• <$ c $ c> display：none


• visbilty：hi dden


• opacity：0

如果手动调用文件（IE点击），IE会阻止上传文件的请求。
$ b 在PrimeFaces中，输入文件的格式为 opacity：0 。

这里是输入文件的样子，没有CSS额外的风格：

解决方法是将输入文件移动到 p：fileUpload 组件之外，这样就可以释放CSS角色，并将其附加到带有按钮样式的跨度或div上，实际点击文件输入。

按钮

 < span class =btn btn-primary btn-file> 
< i class =fa fa-upload>< / i>上传档案
< / span> 
  

---

javascript p>

  $（document）.ready（function（）{
 $（'。ui-fileupload-buttonbar span input [type = file''）。addClass（'uploadBtn'）; 
 $（'。btn-file'）。append（$（'。uploadBtn'））; 
}）; 
  

链接：

现在，让它看起来不错，工作在包括IE在内的所有浏览器上都应该添加一些CSS。
首先忽略前两个CSS类 btn btn-primary （colors，padding etc ..）

btn-file 是自定义技巧：

  .btn-file {
 position：relative; 
 overflow：hidden; 
} 
 
 .btn-file input [type = file] {
 position：absolute; 
 top：0; 
 right：0; 
最小宽度：100％; 
最低身高：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 （）; 
））
  
其中 #editUserUploadMessages 是包含所有消息的div。 b 
 
最后隐藏其他上传的文件： 
 $ b 
  #editUserUploadMessages .ui -fileupload-files {
 display：none; 
 
  
你可以在 github 和演示 
 
Primefaces 5

I have <input type="file" class="ui-fileupload-choose> in code to upload the files. This input-Tag is generated automatically from a PrimeFaces component <p:fileUpload>. 
I want to hide the button for input element and use my own styled button for upload. 

So this is the styled button. 
<input type="button" onclick="$('#formId\\:uploaderId .ui-fileupload-choose input').click();">
This does function in FF, Chrome and IE9, 10, 11. 
But in IE8 nothing happens in upload phase. The "choose file" dialog is shown. The generated input file has JQuery change event. I believe that this event will not be called, because if I click on input file button it goes in all browsers.

I've tried 
<input type="button" onclick="$('#formId\\:uploaderId .ui-fileupload-choose input').click(); #formId\\:uploaderId ui-fileupload-choose input').trigger('change');">
but it doesn't help. 

Also I've tried 
$('#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();               
});
The function in change is called but it doesn't help either.

What can I do in this situation ?
解决方案
This is due to a security restriction in IE.

When there's <input type="file"/> which has either of


display:none
visbilty:hidden
opacity: 0


IE blocks the request to upload the file if it's being called manually (javascript click).

In PrimeFaces case the input file has opacity: 0.

Here's how the input file looks like without the CSS extra flavours:

 

The work around is to move that input file outside p:fileUpload component so it can loose the CSS roles, and append it to a span or div with button styling, that would result an actual click on the file input.

Button
<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'));
});
Something link this:



Now to get it to look nice and work in the same time on all browsers including IE, some CSS should be added.
First ignore the first two CSS classes btn btn-primary (colors, padding etc..)

The btn-file is the custom trick:
.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;
 } 
The final result is a button with input file in the background:



The p:fileUpload component should be hidden:
<p:fileUpload style="display: none" />




In order to display the error messages you can use onchange event for that input file:
$('.uploadBtn').change(function() {
   var a = $('.ui-fileupload-content').html(); var b = $('#editUserUploadMessages').html(a);
})
Where #editUserUploadMessages is a div containing all the messages.

Finally hide the other uploaded files:
#editUserUploadMessages .ui-fileupload-files {
     display: none;
}
You can find a small example on github and a Demo

                        
这篇关于在&lt;输入文件&gt;的IE8中调用更改事件programmaticaly的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！