0

嗨，我正在尝试将 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();});

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

任何人都可以启发我吗？

4

1 回答 1

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; }
于 2013-04-29T19:10:37.517 回答