web-dev-qa-db-ja.com

<input type = "file" />のボタンのテキストを変更するにはどうすればいいですか？

<input type="file" value="Browse" name="avatar" id="id_avatar" />

私はvalueを修正しようとしましたが、うまくいきません。ボタンのテキストをカスタマイズする方法

htmlinput
221
user198729

Bootstrap FileStyle を使用します。これはフォームのファイルフィールドをスタイルするために使用されます。これはTwitter Bootstrapと呼ばれるjQueryベースのコンポーネントライブラリのプラグインです。

使用例

含める：

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

JavaScriptを介して：

$(":file").filestyle();

データ属性を介して：

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
151
Fernando Kosh

代わりに画像を置くことができます、そしてそれはこのようにします：

HTML：

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery：

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

注意：IE 9およびIE 10では、JavaScriptを介したファイル入力でonClickをトリガーすると、フォームに「危険」とマー​​クされ、無効になることはありません。それは伝統的に送信することができるかどうかわからない、JavaScriptで送信されます。

100
ParPar

ファイル入力を隠します。クリックイベントをキャプチャして非表示の入力に転送するための新しい入力を作成します。

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
78
MushyPeas

「ファイルをアップロード...」というテキストはブラウザによって事前定義されており、変更することはできません。これを回避する唯一の方法は、 swfupload のようなFlashまたはJavaベースのアップロードコンポーネントを使用することです。

43
Pekka 웃

すべてのブラウザで完全に動作うまく動作することを願っています。

HTML：
<input type="file" class="custom-file-input">

CSS：

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

content: 'Select some files';内に必要なテキストで''を変更します

Firefoxで動作しない場合は、入力の代わりにこれを使用してください。

<label class="custom-file-input" for="Upload" >
</label>

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
21
Code Black
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

詳細 http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

9
websky

これは 入力ファイル要素のボタンテキストを変更するためのJQueryプラグインです。

HTMLの例：

<input type="file" id="choose-file" />

JSの例

$('#choose-file').inputFileText({
    text: 'Select File'
});

結果：

plugin result

8
datchung

私はこれがあなたが望むものだと思います：

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>


<input type='file' id="getFile" style="display:none">
4
Chit

単に

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

[スニペットで編集]

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>
3
Ken Karlo

キャプションに<label>を使う

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

これは、javascriptなしで動作します。あなたはあなたの心の内容に、複雑さの程度にラベルを飾ることができます。ラベルをクリックすると、クリックは自動的にファイル入力にリダイレクトされます。ファイル入力自体は、どの方法でも非表示にすることができます。ラベルをボタンのように見せたい場合は、次のように多くの解決策があります。

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}
3
MKaama

EDIT：ボタンのテキストではなくファイルのパスについて質問しているのがわかります。私の悪いこの質問につまずく他の誰かが私が最初にした方法でそれを解釈する場合に備えて、私は私の最初の答えを以下に残します。

2nd EDIT：私はこの質問を誤解していて回答に意味がないと判断したため、この回答を削除しました。しかし、別の回答でのコメントは、人々がまだこの回答を見たがっていたことを示唆していたので、私はそれを取り消しています。

私の最初の答え（私はOPがボタンのテキストではなくパスについて尋ねていると思った）：

これはセキュリティ上の理由からサポートされている機能ではありません。 Opera Webブラウザはこれをサポートしていましたが、削除されました。これがサポートされているなら何が可能であろうかについて考えてください。あなたは、ファイルアップロード入力でページを作り、それに何らかの機密ファイルへのパスを事前に追加し、そしてonloadイベントによって引き起こされたjavascriptを使ってフォームを自動送信することができます。これはユーザがそれについて何かをするには速すぎるでしょう。

3
Asaph

あなたは単にいくつかのCSSトリックを追加することができます。あなたはjavascript以上の入力ファイルを必要とせず、私は既存の値属性を保持します追加する必要があるのはcssだけです。あなたはこの解決策を試すことができます。

.btn-file-upload{
     width: 187px;
     position:relative;
 }

.btn-file-upload:after{
    content:  attr(value);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;    
    width: 48%;
    background: #795548;
    color: white;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 2;
 }
<input type="file" class="btn-file-upload" value="Uploadfile" />
1
Udara Kasun

CSSとブートストラップクラスのみ

        <div class="col-md-4 input-group">
            <input class="form-control" type="text"/>
            <div class="input-group-btn">
                <label for="files" class="btn btn-default">browse</label>
                <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
            </div>
        </div>
1
mahmood kabi
  1. その<input type="file">の前に、画像を追加し、それが<input style="position:absolute">のスペースを占める<input type="file">

  2. ファイル要素に次のCSSを使用する

    position:relative;  
opacity:0;  
z-index:99;
1
Bibaswann Bandyopadhyay

あなたがRailsを使っていてそれをうまく適用できない場合は、@ Fernando Koshが投稿した最初の回答からいくつかのヒントを加えたいと思います。

  • ファイルをダウンロード Zip し、ファイルbootstrap-filestyle.min.jsをコピーします。app/assets/javascripts /

  • application.jsを開き、以下の行を追加してください。

    // = bootstrap-filestyle.minが必要

  • あなたのコーヒーを開き、この行を追加してください

    $（ "：file"）。filestyle（{buttonName： "btn-primary"、buttonBefore：true、buttonText： "ここにあなたのテキスト"、icon：false}）;

0
widjajayd

これは、純粋なHTMLとJavaScriptを使って、入力のテキストをファイルタイプで "変更"する方法です。

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>
0
IntelarX

私にとっては、bootstrap-filestyleのカスタムテキストは機能しません。それはボタンの装飾に役立ちますが、cssで格闘する前に私は以下を試してみる前に、変わってテキストを変に変更してください。

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap-filestyleは、コンポーネントをbutonTextという名前のクラスを持つスパンとしてレンダリングします。そのため、ドキュメントをロードするときにテキストを変更するだけです。簡単な権利そしてそれはすべてのブラウザで動作しなければなりません。

乾杯

0
Boris Ch.F