尝试在 IE8 上提交时，文件输入被清除答案

【问题标题】：File input gets cleared when attempted to submit on IE8尝试在 IE8 上提交时，文件输入被清除
【发布时间】：2011-07-15 18:50:58
【问题描述】：

我正在处理 AJAX 上传。由于 IE 没有所需的对象，我将不得不使用 iframe 解决方法。

理论上，这很简单：

创建表单和 iframe
更改表单的目标和 iframe 的名称属性
当输入文件字段发生变化时，会提交表单

此外，由于输入文件字段很烂，最好有一个“上传”按钮触发隐藏输入文件字段的点击事件以打开文件选择对话框。

是的，那是理论。实际上，情况要糟糕得多。首先，IE8 不知何故不喜欢克隆的 iframe，所以我们必须随时附加每个 iframe。然后，当尝试提交时，文件输入字段会被清除。

我知道会发生什么，什么时候发生，这很丑。

前往this example，它工作得很好。表单被克隆，文件字段有数据并提交表单。但是，文件输入没有名称属性，我无法在服务器端访问它。
所以我添加了属性here's the example，这就是发生的情况：文件字段被清除。只是因为name属性。

这可能是一个愚蠢的问题，但是有解决方法吗？我很清楚，如果文件输入字段被选中，它可以触发自动上传，但我想知道我是否可以不需要实际点击文件字段，就像在每个理智的浏览器中一样。

谢谢。

【问题讨论】：

我相信这是 IE 8 内置的安全措施，不允许您访问 input[type=file] 的 name 属性。
使用 plupload，一切就绪 :) plupload.com
@Ivan 我不想访问它。 @el 酋长，是的，我知道有很多库，但我喜欢不依赖闪存，而且我真的很喜欢自己做。
伟大而简单的解决方案：stackoverflow.com/questions/5191375/…

标签： jquery internet-explorer-8 file-io

【解决方案1】：

你必须点击IE中的输入文件（可能是为了安全），而不是点击其他按钮触发点击事件。

<script>
    $(function() {
        var uploadFile = $('#uploadFile');
        var txtUploadFile = $('#txtUploadFile');
        var btnUploadFile = $('#btnUploadFile');

        uploadFile.css('position', 'absolute')
                .css('opacity', '0')
                .width(30);

        uploadFile.change(function() {
            txtUploadFile.val(this.value);
        });

        btnUploadFile.mousemove(function(e) {
            uploadFile.css('top', btnUploadFile.offset().top)
                .css('left', e.pageX - uploadFile.width() / 2);
        });
    });

<body>
    <form target="hiddenIframe" action="your_upload_site" method="post" enctype="multipart/form-data">
        <input id="txtUploadFile"> 
        <input id="btnUploadFile" type="button" value="Select">
        <input id="uploadFile" name="uploadFile" type="file" />
        <input type="submit" value="Upload">
    </form>

    <iframe name="hiddenIframe" style="display: none;"></iframe>

【讨论】：

【解决方案2】：

有点晚了，但我今天遇到了同样的问题，可以解决。使用带有指向文件输入的 for 属性的标签。

您的 html 将如下所示：

<label for=foo>Upload<label>
<form>
    <input type=file id=foo>
    <input type=submit>
</form>

在标签的点击事件中，您只创建 iframe。然后你在文件输入上有一个 onchange-Listener 触发表单提交。我的用例有点不同，所以我不能 100% 确定这是否也适合您，但我认为应该可以。

【讨论】：

【解决方案3】：

input[type=file] 的名称属性是只读的。根据http://msdn.microsoft.com/en-us/library/ms535128(v=vs.85).aspx：

Windows Internet Explorer 8 及更高版本。当文件被选中时使用输入 type=file 对象，value 属性的值取决于“包括本地目录路径时的值将文件上传到服务器”安全区域的安全设置用于显示包含输入对象的网页。

仅返回所选文件的完全限定文件名启用此设置时。当设置被禁用时，互联网 Explorer 8 将本地驱动器和目录路径替换为字符串 C:\fakepath\ 以防止不当信息泄露。

为了说明，假设您尝试上传一个名为 C:\users\contoso\documents\file.txt。当你这样做时，价值 value 属性设置为 c:\fakepath\file.txt。

编辑：我无法确定这是否是问题所在，因为您的问题对于您要完成的工作有点含糊。

【讨论】：

感谢您的回复。但我认为你没有阅读我的问题。模糊的？我举了两个例子：一个有效，一个无效。区别在于一个有名称属性，另一个没有。