web-dev-qa-db-ja.com

入力フィールドのないファイルアップロードボタン？

可能性のある複製：
jQuery：<input type =“ file” />のクリックのシミュレーションはFirefoxでは機能しませんか？

デフォルトで横に入力のないファイルボタンを持つことは可能ですか？理想的には、ユーザーがアップロード前に選択した内容を表示せずにファイルに移動できるボタンだけが必要です。ユーザーがファイルを選択した後、次の方法でフォームを送信します。

$("#file").change(function() {
    $("#update_button").trigger('click');
});

これはいくつかのcssまたはjqueryマジックで可能になるはずです...

jqueryhtmlcssfile-upload
23
Paul

正しく覚えていれば、HTML5を使用すると、非表示の入力要素でclickメソッドを呼び出して、カスタムボタンを介してファイルダイアログを表示できます（要素がなくても機能するだけではありません）。残念ながら、現在使用されているすべてのブラウザーがまだこれをサポートしているわけではないため、ファイル入力をボタンのようにスタイリングする必要があります。

これは陽気にいが、私がかつてサイトで遭遇した巧妙なCSSハックです（おそらくimgur）：

.fileupload {
    width: 100px;
    height: 50px;
    position: relative;
    overflow: hidden;
    background: ...; /* and other things to make it pretty */
}

.fileupload input {
    position: absolute;
    top: 0;
    right: 0; /* not left, because only the right part of the input seems to
                 be clickable in some browser I can't remember */
    cursor: pointer;
    opacity: 0.0;
    filter: alpha(opacity=0); /* and all the other old opacity stuff you
                                 want to support */
    font-size: 300px; /* wtf, but apparently the most reliable way to make
                         a large part of the input clickable in most browsers */
    height: 200px;
}

そして、それに付随するHTML：

<div class="fileupload">
  <input type="file" />
  Any content here, perhaps button text
</div>

それがすることは、それがボタンをカバーすることを確実にするためにファイル入力自体を巨大にし（フォントサイズを変更することにより（！？））、overflow: hidden;で余分な部分を切り取ります。これは、非常に大きなボタンでは機能しない場合があります。

22
Matti Virkkunen

visibility: hidden;でinputボタンを非表示にし、クリックイベントハンドラーを他のボタンにアタッチできます。

HTML：

<input type="file" name="somename" size="chars">
<button>Choose File</button>

CSS：

input {
    display: block;
    visibility: hidden;
    width: 0;
    height: 0;
}

JavaScript：

$('button').click(function(){
    $('input').click();
});

フィドルは次のとおりです。 http://jsfiddle.net/tCzuh/

52
Joseph Silber

不透明度を0に設定すると、ボタンのように見える別のdivをその下に追加できます。このスタイルは好きなように設定できます。

以下の実際のコード例：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div class="wrapper">
    <div class="fakeuploadbutton">upload</div>
    <input id="file" type="file" name="file" />
</div>
<script type="text/javascript" charset="utf-8">
    jQuery('#file').css('opacity',0);    
</script>
<style type="text/css" media="screen">
    .wrapper { position: relative; }
    .fakeuploadbutton { 
        background: red url('myuploadbutton.png') no-repeat top left;
        width: 100px; height: 30px;
    }
    #file { 
        position: absolute;
        top: 0px; left: 0px; 
        width: 100px; height: 30px;
    }
</style>
7
mattlangtree

見るオプションはこちらです：

http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

これにより、<input>フィールド

0
Jason