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 に答える