5

入力ボックスがあり、ユーザーが入力ボックスをクリックしてファイルを開くダイアログを表示し、同じ入力ボックスにファイル名を表示するようにします。しかし、input type="file" を使用すると、「ファイルの選択ボタン」が表示されますが、ボタンを表示したくありません。どうすればいいですか？

html:

<div class="fileupload">
    <input type="file" class="file" name="image" />
</div>

<div class="fileupload">
    <input type="file" class="file" name="attachement" />
</div>

http://jsfiddle.net/EctCK/ ** 私はこれを望んでいません。ファイルの選択ボタンを非表示にするにはどうすればよいですか?

4

3 に答える 3

13

<input type="file"/>スタイル付きのボタンやその他の要素の上に透明を重ねることができます。

<input type="file" style="opacity:0;"/>

実際のデモについては、このJSFiddleを参照してください。

于 2013-10-11T05:00:37.967 に答える
7

これにはちょっとしたハックがあります。ページでファイルのアップロードを制御する必要があります。ただし、それを非表示にして、div/span/button などの他のコントロールを使用してファイル アップロード コントロールをシミュレートし、必要に応じてスタイルを設定することができます。これはjsfiddleの作業サンプルです。

HTML:

<div id="dummy" class="dummyDiv"> 
    <span>click to chose file:</span> 
    <span id="fileName" class="yellow"></span>
</div>
<div class="wrapper">
    <input type="file" id="flupld" />
</div>

JS:

$("#dummy").click(function () {
    $("#flupld").click();
});

$("#flupld").change(function () {
    //file input control returns the file path as C:\fakepath\<file name>
    //on windows, so we remeove it and show only file name.
    var file=$(this).val().replace(/C:\\fakepath\\/ig,'');

    $("#fileName").text(file);
});
于 2013-10-11T05:14:05.720 に答える
-1

それを試してみてください：

<input type="file" id="upload" style="display:none">
   <a href="" onclick="document.getElementById('upload').click(); return false;"> Upload </a>

JSFiddleでの作業サンプル

于 2015-10-11T19:36:07.140 に答える