Question

我精心制作了'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>

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

Answer 1

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

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

修改：解决方法IE clears input[type="file"] on submit

Answer 2

我决定采用在我的图像上覆盖透明文件元素的方法。我的灵感来自这个页面：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>

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

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

2 个答案: