logo标签列表

为什么我的表单在Internet Explorer 9中无法上传文件？

formsinternet-explorerfile-uploadcross-browserinternet-explorer-9
19

欢迎来到第32,342,343集的"为什么Internet Explorer如此糟糕？"...

我看到很多报告称IE9上传文件时效果不佳。显然它有很多关于何时可以或不可以工作的注意事项（如果有人有明确的列表，我会很高兴看到它）。然而，我看到的大多数问题/解决方案都与javascript有关，通常是jQuery表单插件或类似的东西。

我的表单不是通过AJAX提交的，文件输入字段也没有被CSS隐藏或遮挡。然而，我每天从使用IE9尝试提交表单并且"没有任何反应"(=表单提交。没有错误，但文件没有上传）收到几个支持票。我没有得到过其他浏览器的投诉，甚至IE8 似乎可以工作（和以往一样）。

这是我的表单顶部。我错过了什么吗？

<form action="http://mysite.dev/account-settings/?open=resume" method="post" class="wpjb-form" enctype="multipart/form-data">    

        <input type="hidden" name="resume_form" value="resume_form" />
        <fieldset class="wpjb-fieldset-default">

            <input id="firstname" name="firstname" type="hidden" class="regular-text " value="John" />
            <input id="lastname" name="lastname" type="hidden" class="regular-text " value="Henry" />
            <input id="email" name="email" type="hidden" class="regular-text " value="john.henry@johnhenry.com" />

            <div class="wpjb-element-input-checkbox wpjb-element-name-is_active">
                <label class="wpjb-label">Show resume? </label>
                <div class="wpjb-field">
                    <label for="is_active_1"><input type="checkbox" class="" name="is_active" id="is_active_1" value="1" checked="checked" /> Yes <small style="display:inline;">(Uncheck to hide your resume)</small></label>

                </div>
            </div>
            <div class="wpjb-element-input-select-one wpjb-element-name-file">
                            <label class="wpjb-label">Upload a <i>new</i> resume file</label>
                <div class="wpjb-field">
                    <input style="line-height:1em;" id="file" name="file" type="file" class="regular-text " />
                    <small class="wpjb-hint">Accepted file types: doc, docx, odf, pdf, rtf</small>
                </div>
            </div>
        </fieldset>
        ...

接下来还有几个<fieldset>，然后以这种方式结束：

    ....
    <p class="submit">
        <input type="submit" name="Submit" id="wpjb_submit" value="Save Changes" />
    </p>
</form>

更新 我很高兴那些没有遇到这个问题的人，但我并不是唯一一个遇到它的人： http://answers.microsoft.com/en-us/ie/forum/ie9-windows_vista/cannot-upload-files-using-internet-explorer-9/5724d921-ae71-e011-8dfc-68b599b31bf5

更新2 我看到很多建议添加元标记以强制用户代理使用IE8... <meta http-equiv="X-UA-Compatible" content="IE=8" /> 我不想这样做，因为虽然我支持IE8，但我的网站上的许多元素在IE8和IE9中呈现不同。这将会给IE用户创造一个相当糟糕的用户体验，因为任何IE用户在该特定页面上都会经历暂时的“时间扭曲”，回到IE8。

我只能猜测这应该可以正常工作（诅咒你，IE！）。这就是为什么这是一条注释：1）http://mysite.dev/account-settings/?open=resume 我们能否将其更改为不是查询URL？我过去曾经遇到过与IE的查询问题。Legacy JScript具有查询关键字，可以修改url的查询字符串而不让您知道。这让我感到困惑了几个星期。2）也许我们还可以尝试验证服务器端是否接收到文件？您说没有错误，但是不应该有吗？它可以重定向回此页面以进行重新提交（和其他字段预填充）。 - Graham Robertson
我会测试你对查询URL的想法。至于在服务器端验证接收到的文件...它绝对不会被保存在那里，因为同一页检查其是否存在，而且它肯定没有到达那里。也许你建议的是更复杂的事情，比如数据是否实际发送了？这更有趣，因为在我的表单中，文件上传是必需的。如果真正的浏览器用户试图跳过它，表单提交将失败，并且用户会看到一条消息。在IE9中，什么都不会发生。表单提交“成功”，但没有文件上传/保存或错误。 - emersonthis
我曾经看到IE在表单非常简单的情况下（如上所示），与服务器交互失败：<form action="/upload" method="post" enctype="multipart/form-data"> <h2>上传</h2> 标签：<input type="text" name="tag"><br> 要上传的本地文件：<input type="file" name="file"> <br> <input type="submit" value="发送文件"> </form> - Mutant Bob
你可以尝试简化你的代码，无论是客户端还是服务器端，直到找到罪魁祸首（如果有的话）。我刚刚在我的服务器上使用你的表单进行了测试，并成功地在IE9中上传了一个文件。这是我使用的代码（PHP）：https://gist.github.com/jimthoburn/5810636 这是我上传的文件：http://img.wallpaperstock.net:81/windmills-wallpapers_22092_1600x1200.jpg - Jim
5个回答
2
通过 setTimeout 包装 jQuery 表单提交，我成功解决了这个令人噩梦般的问题。
$('#complete_profile input[type="submit"]').click(function(){
  setTimeout(function() {
    $('#complete_profile form').submit();
  }, 0);
});

这可能会导致表单提交时出现重复提交的情况，因此请小心。
0

好吧，我宁愿留一条评论而不是回答，但是我目前还没有足够的积分！

  1. 用户是否处于怪癖模式？大多数IE用户对怪癖模式并不了解，可能在尝试刷新页面时意外点击了它（而不是按下F5键）。如果问题是间歇性的，这可能是原因之一。

  2. 接着上面的问题...在服务器端，你是如何检查空字段的？我更多地是指JS方面，在那里你经常会寻找“”，null和undefined，我只是在考虑也许怪癖模式正在发送一些模糊数据，而你的服务器端错误检查正因为没有寻找它而错过了，从而报告一切正常。

0
像Graham所说的那样，我认为这可能更多是服务器问题 - 而且我从未在IE9（或更新版本）中遇到过文件上传问题 - 我猜你不想发布处理上传的PHP脚本的代码？
请看我在上面给Onur的评论。 - emersonthis
0

我建议设置X-UA-Compatible元标记的值，看看是否有任何差异。

请参阅此问题以获取可能的值：什么是<meta http-equiv="X-UA-Compatible" content="IE=edge">？

也可能是页面在IE9中触发了非标准模式。我建议在IE9中打开页面，打开开发人员工具，并查看选择了哪些浏览器/文档模式。这可能会给你一些线索。请注意，“enctype”表单属性在IE8之前不受支持，因此如果浏览器使用较旧的文档模式，则不会识别该属性。

我不想这样做，因为虽然我支持IE8，但我的网站上许多元素在IE8和IE9中呈现方式不同。这将造成相当糟糕的用户体验，因为任何IE9用户都会经历一个临时的“时间扭曲”，回到那个特定页面的IE8版本。 - emersonthis
1
我并不是建议在生产环境中使用那个标签。我的意思是，在调试时尝试不同的值可能有助于缩小问题的来源。错误可能是间歇性的，但可能存在更大的问题，比如错误的文档模式、错误的浏览器模式等等... 你能在IE9中打开该网站吗？ - Roy Tinker
我能够在IE9中进行测试，但问题并不总是发生，因此很难从本地测试中学到任何明确的东西。过去我曾经复制过一两次，但最近完全没有出现。 - emersonthis
我理解问题是间歇性的。我的建议是寻找其他警告信号，例如错误的文档/浏览器模式。当某些东西在IE8中工作但在IE9中不工作时，根本原因（根据我的经验）通常是文档/浏览器模式问题、不正确的浏览器嗅探或在JavaScript中使用了已弃用/更改的API。我怀疑你的问题属于第一类。 - Roy Tinker
0
如果没有任何数据被发送，您可以通过服务器端脚本上的隐藏输入来检查提交的数据。例如，如果您正在使用PHP，它可能是这样的：
<? if($_POST['resume_form']=='resume_form'){
    //Do something
} ?>

或者您也可以使用兼容于 IE 的元标签，以便像 IE8 一样呈现页面。

<meta http-equiv="X-UA-Compatible" content="IE=8" />
我知道这个表单处理提交是正确的，因为每天有数百个用户使用它而没有任何问题。唯一的问题偶尔来自IE用户。 - emersonthis
我在我们的管理员登录页面上遇到了同样的问题，我通过ie兼容的meta标签解决了它。但是我知道在不同版本的IE中，<button type="submit" value="Send"></button>和<button type="submit">Send</button>被完全不同地呈现。也许你的问题与这类似。 - Onur Kucukkece
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接