4

我“精心制作”了这段 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/Firefox/Safari 上完美运行。（有趣的是，如果我设置它，它甚至可以工作visibility: hidden;。myInput所以显然这不是一个安全问题）。但是 IE 9 和 10 都显示相同的行为：单击图像成功弹出对话框，文件路径在“alert 1”中正确设置，但在“alert 2”中消失了，并且表单没有提交. 另一方面，直接点击myInput正确的浏览按钮会弹出对话框并提交表单。

我对这种行为是怎么可能的感到非常困惑！任何关于如何对抗烦人的 IE 的建议将不胜感激:)

4

2 回答 2

0

我相信这是 IE 的一个安全特性。如果使用另一个触发器，它将不允许您访问文件输入的名称属性。

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

编辑：解决方法IE 在提交时清除 input[type="file"]

于 2013-10-08T05:19:26.930 回答
0

我决定采用在图像上覆盖透明文件元素的方法。我的灵感来自这个页面：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=file 元素覆盖的尺寸。在这个 CSS 中有一件事非常出色，它来自那个链接。我说的是为文件元素设置非常大的字体大小。这是让它在 IE 中工作的关键，因为它恰好使“浏览”按钮变得如此巨大以至于它填满了整个占位符。在不更改字体大小的情况下，在 IE 中，您最终将只有部分图像能够显示文件对话框（其余部分将是透明文本字段）。我会指出，在 Chrome/Firefox/Safari 中，这个字体大小技巧是不必要的，因为整个文件元素都可以在那里点击。

于 2013-10-09T04:00:22.260 回答