IE浏览器需要点击两次提交按钮

Question

我有以下代码来提交表单并调用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）； 只有它的名称会被传递。

- Kam

---

尝试使用JQuery在您的表单上添加提交事件http://api.jquery.com/submit/，然后在回调中添加警报框，并检查IE是否首次显示警报。还要检查控制台是否有错误（F12）。 - sdespont

是的，当我这样做时，我能够在第一次提交后看到警报，但只有第二次提交调用了脚本 :$ - Kam

这显然是IE已知的问题。如果你显示文件输入元素，然后使用浏览按钮并选择一个文件，就好像它仍然隐藏着。你会看到文件名显示在文件输入元素中，但第一次单击提交按钮时会被清除。这个SO帖子以及其他帖子也谈到了这个问题：http://stackoverflow.com/questions/9885684/on-form-submit-file-field-clears-in-internet-explorer-9 - iGanja

这被标记为重复，但实际上看起来是另一个原因。 OP甚至没有执行preventDefault！当然，代码可以更简洁，这也有许多不必要的版本 - 但我认为这不是标记为潜在答案的那个的重复！而且我不认为这应该是社区版本。 - Joel Peltonen

这可能有点老了，但是你的问题的解决方案可以在https://dev59.com/FHRA5IYBdhLWcg3w4iF_找到。基本上，问题在于上传按钮中的display:none，在css中将其更改为屏幕外（但可见）。 - Tomer Grassiany

Answer 1

请按照以下方式更新您的函数

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

希望这能对您有所帮助。

- Manish Parmar

---

分离解决了双击问题，但导致uploader.php表单无法接收实际文件（请查看问题中发布的示例）。 - Kam

脚本仅接收了文件名。不知何故，detach() 函数清除了表单中的文件。 - Kam