html - 文件上传时IE8空白文件名

Question

我正在尝试将图像上传到我们的服务器，它可以在 Chrome、Firefox 和 IE9 上运行，但不能在 IE8 上运行。请求中的文件名在 IE8 中显示为空白，但在 Chrome 中则不是。服务器取回的文件在IE8的情况下是0kb(应该是219kb)。

HTML

<form action="$!toolsServiceUrl" enctype="multipart/form-data" method="post" id="left-section" class="section right-border container">
    <input type="hidden" name="okRedirectURL" value="$!okRedirect" />
    <input type="hidden" name="errorRedirectURL" value="$!errorRedirect" />
    <input type="hidden" name="updateSection" value="LOGO_AND_MESSAGE" />
    <input type="hidden" name="loginGuid" value="$!loginGuid" />
    <input id="current-file" class="file hide" type="file" accept="image/*" name="file"/>
    <a id="upload-now" class="btn upload open-file">$!INTL_UploadNew</a>
    <input href="#" class="btn btn-primary submit-for-review" type="submit" value="$!INTL_SubmitForReview" />
</form>

Chrome 请求负载

------WebKitFormBoundaryhaQZT4Syn2OCktxQ
Content-Disposition: form-data; name="file"; filename="wallpaper-2055060.jpg"
Content-Type: image/jpeg

IE8 请求负载

-----------------------------7dc230b1a0a3a
Content-Disposition: form-data; name="file"; filename=""
Content-Type: application/octet-stream

(我省略了请求有效载荷中所有不相关的数据)

我需要它在 IE8 上工作，因为我们有大量用户使用 IE8。

Answer 1

您很可能隐藏了文件输入字段，然后使用 javascript 触发点击事件以打开文件对话框。 IE 假定点击是不安全的，不会发送到服务器。

为避免这种情况，您需要单击真实字段或制作 <label for="idOfFileInputField">这也将触发“安全”点击事件。

您的代码可能如下所示:

<form action="$!toolsServiceUrl" enctype="multipart/form-data" method="post" id="left-section" class="section right-border container">
   ...
   <input id="current-file" class="file hide" type="file" accept="image/*" name="file"/>
   <label for="current-file" id="upload-now" class="btn upload open-file">$!INTL_UploadNew</label>
   ...
</form>

你不应该用display:none隐藏文件输入字段，否则不会触发标签点击。相反，你制作类似 position:absolute; left:-9999px 的东西从可见视口(viewport)隐藏。