使用jQuery模拟input = file click时奇怪的IE故障

I 'crafted' this piece of jQuery + html to accomplish the following:
There is a placeholder image that user can click, which causes a file selection dialog to open. Once a file is selected, the corresponding multipart form is uploaded to the server. I am trying to imitate AJAX behavior for this file upload, so I also use an invisible iframe to receive server response.
Let me present the code first, so it would be easier to explain the problem

我制作了'jQuery + html这一部分来实现以下功能:用户可以单击一个占位符图像,这会导致打开文件选择对话框。选择文件后,相应的多部分表单将上载到服务器。我试图模仿这个文件上传的AJAX行为,所以我也使用一个不可见的iframe来接收服务器响应。让我先介绍一下代码,这样就可以更容易地解释这个问题了

jQuery("#myInput").change(function () {  // Submit form upon file selection
   // alert("myInput.val() = " + $('#myInput').val());  // alert 1
    $('#form1').submit();
   // alert("myInput.val() = " + $('#myInput').val());  // alert 2
});

<form id="form1" action="/do_upload.php" method="post" enctype="multipart/form-data" target="target_frame">
<input id="myInput" type="file" name="userfile" /><br>
</form>
<img src="/img/placeholder.png" onclick="$('#myInput').click();" >

<iframe id="target_frame" name="target_frame" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

The code works perfectly on new Chrome/FF/Safari. (Interestingly it even works if I set "visibility: hidden;" on "myInput". So apparently that's not much of a security concern). However both IE 9 and 10 show the same behavior: clicking the image brings up the dialog successfully, the file path is correctly set in "alert 1", but it is gone in "alert 2", and the form doesn't get submitted. On the other hand, clicking directly on the browse button of "myInput" properly brings up the dialog and submits the form.
I am absolutely confused by how this behavior can even be possible! Any suggestions on how to fight off the annoying IE would be greatly appreciated :)

该代码适用于新的Chrome / FF / Safari。 (有趣的是,如果我在“myInput”上设置“visibility:hidden;”,它甚至可以工作。显然,这不是一个安全问题)。但是,IE 9和10都显示相同的行为:单击图像会成功显示对话框,文件路径在“警报1”中正确设置,但它在“警报2”中消失,表单未提交。另一方面,直接单击“myInput”的浏览按钮会调出对话框并提交表单。我对这种行为甚至可能如此可能感到困惑!关于如何打击烦人的IE的任何建议将不胜感激:)

2 个解决方案

#1

I believe it is a safety feature of IE. it won't allow you to access the name attribute of the file input if using another trigger.

我相信它是IE的安全功能。如果使用其他触发器,它将不允许您访问文件输入的name属性。

You must click the file input for IE and not use another trigger.

您必须单击IE的文件输入,而不使用其他触发器。

Edit: A workaround IE clears input[type="file"] on submit

编辑:解决方法IE在提交时清除输入[type =“file”]

#2

I decided to go with the method of overlaying a transparent file element over my image. My inspiration came from this page: https://coderwall.com/p/uer3ow. Here is my HTML and CSS that were required:

我决定采用在我的图像上覆盖透明文件元素的方法。我的灵感来自这个页面:https://coderwall.com/p/uer3ow。这是我需要的HTML和CSS:

.file_loader {
    position: relative;
    overflow: hidden;
    border: solid gray 1px;
    margin: auto;
    width: 300px;
    height: 400px;  
}

.file_loader .hidden_file {
    display: block;
    background: white;
    font-size: 80px;
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.placeholder {
    height: 100%;
    width: 100%;
}

<div class="file_loader">
    <img src="/img/placeholder.png" id="placeholder1" class="placeholder" >
    <form id="form1" action="/do_upload.php" method="post" enctype="multipart/form-data" target="target_frame">
    <input id="myInput" class="hidden_file" type="file" name="userfile" /><br>
    </form>
</div>

As you can see the height and width of the "file_loader" class enforce the dimensions of the placeholder image and of the transparent input=file element overlay. There is one thing in this CSS that is truly brilliant, and it came from that link. I'm talking about setting the very large font-size for file element. It is key for making it work in IE, because it happens to make the "Browse" button so gigantic that it fills the whole placeholder. Without changing the font-size, in IE you would end up with only part of the image being able to bring up file dialog (the rest would be a transparent text field). I'll point out that in Chrome/Firefox/Safari this font-size trick is unnecessary, as the whole file element is clickable there.

如您所见,“file_loader”类的高度和宽度强制执行占位符图像和透明input = file元素叠加的尺寸。这个CSS中有一件事真的很棒,它来自那个链接。我在谈论为文件元素设置非常大的字体大小。它是使它在IE中工作的关键,因为它恰好使“浏览”按钮如此巨大,以至于它填满了整个占位符。在不改变字体大小的情况下,在IE中你最终只会有部分图像能够调出文件对话框(其余部分将是一个透明的文本字段)。我要指出,在Chrome / Firefox / Safari中,这种字体大小的技巧是不必要的,因为整个文件元素都可以点击。

#1