提交按钮需要在 IE 上单击两次 [重复]答案

【问题标题】：Submit button needs to be clicked twice on IE [duplicate]提交按钮需要在 IE 上单击两次 [重复]
【发布时间】：2013-07-09 19:57:42
【问题描述】：

我有以下代码来提交表单并调用 PHP 脚本。

<script>  
function handleBrowse()
{    
    $('#uploadedfile').click();
}

function displayFilePath(obj)
{ 
    document.getElementById('dummyFilePath').innerHTML = obj.value;
}
</script>


    <div id="dummyFilePath" class="dummyFilePath"></div>
    <input type="button" value="Browse" onclick="handleBrowse();"/>

    <form enctype="multipart/form-data" action="../php/uploader.php" method="POST" target="myiframe">
        <input type="file" id="uploadedfile" name="uploadedfile" onchange="displayFilePath(this)" style="display:none"/>        
        <input type="submit" value="Upload File" />
    </form>

    <iframe  name="myiframe" id="myiframe" src="" width=1 height=1 style="visibility:hidden;position:absolute;bottom:2px;"></iframe>

在 Firefox 中，我只需单击一次即可提交。但是在IE中，我需要点击两次！

你能解释一下为什么吗？

请在 IE 上运行 this jsFiddle 来查看问题。您可以清楚地看到，一旦您浏览了要上传的文件，除非您按两次上传文件按钮，否则表单的操作不起作用。

PS：IE中的双击问题可以按照下面的答案解决，但这会导致上传的文件永远无法到达目的地（uploader.php）；只有它的名字会

【问题讨论】：

不确定是不是你问题的根本原因，但是需要关闭元素标记：<input type="button" value="Browse" onclick="handleBrowse();"/>
而且，当您使用 JQuery 时，document.getElementById('dummyFilePath').innerHTML = obj.value; 等于 $('dummyFilePath').html(obj.value);。还要避免内联 JS 声明像 onClick 这样的事件。
尝试使用 JQuery api.jquery.com/submit 在表单上添加提交事件，然后在回调中添加警报框并检查警报是否第一次使用 IE 显示。还要检查控制台是否有错误 (F12)
这显然是一个已知的 IE 问题。如果您显示文件输入元素，然后使用浏览按钮并选择一个文件，就好像它仍然隐藏一样。您将看到文件输入元素中显示的文件名称，但在您第一次单击提交按钮时会被清除。这个 SO 帖子，alnog with others，也谈到了它：stackoverflow.com/questions/9885684/…
这被标记为欺骗但它实际上看起来像一个不同的原因。 OP 甚至不做 preventDefault！当然，代码可能会更干净，而且这也有不必要的转数——但我不认为这是对被标记为潜在答案的代码的欺骗！而且我认为这不应该是一个社区版本。

标签： jquery html

【解决方案1】：

像这样更新你的函数

function handleBrowse()
{   
    $('#uploadedfile').click();
    $('#uploadedfile').detach();
}

希望这对你有帮助。

【讨论】：

detach 解决了双击问题，但是导致uploader.php表单没有收到实际文件（请看问题中发布的示例）。
脚本只收到文件名。不知何故 detach() 从表单中清除了文件