Question

您好我正在尝试将div设置为按钮，当单击时会打开一个隐藏的文件浏览器供您选择文件。然后，所选文件将出现在隐藏文件输入中（我已将其隐藏在下方）

除了IE（humph！）

之外，所有浏览器都能正常工作

我的代码是：

<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();});

小提琴：http://jsfiddle.net/NVpHY/1/

任何人都可以启发我吗？

Answer 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; }

jquery - 为什么这个文件输入没有在IE中填充

1 个答案: