为什么这个文件输入不能在IE中填充

why does this file input not populate in IE

本文关键字：IE 填充 不能 输入 文件 为什么      更新时间：2023-09-26

嗨，我试图有div样式作为一个按钮，当点击打开一个隐藏的文件浏览器为您选择一个文件。然后选中的文件出现在隐藏文件输入中(我在下面取消了隐藏)

所有浏览器都可以正常工作，除了IE(哼!)

我的代码是: 
<div id="TileImageUpload" style="border:1px solid #000000; padding:5px;"> Upload an image</div>
<br/>
<form action="uploadImage.php" target="upload_target" id="TileUploadImageForm" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
<input type="file" name="data[Tile][image]"  id="TileImage"/>
<input type="submit" value="Submit">
</form>
<iframe id="upload_target" name="upload_target" src="#" ></iframe>

， javascript是:

$('#TileImage').change(function() {$('#TileUploadImageForm').submit();});
$('#TileImageUpload').click(function(){$('#TileImage').click();});

a fiddle: http://jsfiddle.net/NVpHY/1/

有谁能开导我一下吗?

我认为IE不喜欢隐藏的输入，一个解决办法是使用标签标签与输入。IE和大多数其他浏览器将打开文件浏览器，如果单击文件输入的标签，以及如果您点击实际输入。然后，您需要隐藏文件输入，将其从屏幕上移除，而不是将其设置为隐藏。

我在这里找到了一个完整的工作示例:http://jsfiddle.net/djibouti33/uP7A9/

<form id="uploader-form" action="http://hotblocks.nl/_http_server.php">
<label for="fileinput" id="link" class="trigger-file-input">Link Label</label>
<input type="file" id="fileinput" />
</form>

JS 

$('#fileinput').on("change", function() {
    $('#uploader-form').submit();
});
if($.browser.mozilla) {
    $('.trigger-file-input').click(function() {
          $('#fileinput').click();                             
    });
}
css 

#fileinput { position: absolute; left: -9999em; }
#link { color: #2a9dcf; font-size: 16px; }
#link:hover { text-decoration: underline; cursor: pointer; }
相关文章：