bootstrap 4でカスタム入力ファイルを使用する場合、入力を変更したり、browse
ボタンを表示したりしないでください。
<label class="custom-file">
<input type="file" id="Image" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
。custom-file
position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer;
。custom-file-input
min-width: 14rem;
max-width: 100%;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
。custom-file-control
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
user-select: none;
background-color: #fff;
border: 1px solid #ddd;
border-radius: .25rem;
私がチェックした限り(疑似要素の前と後を挿入する必要があります)、それは機能します。
.custom-file-control:before{
content: "Browse";
}
.custom-file-control:after{
content: "Add files..";
}
ドキュメントには、ドキュメントの言語を設定する必要があると記載されています。たとえば、次のように設定します。
<html lang="en">
@masud_moniの回答のように、別の言語を指定して、「en」の代わりにそれを使用しない限り、それを機能させるには十分でした。
次のコードを使用してみてください。それがあなたの問題を解決することを願っています。 Bootstrapページのコード例のすぐ下にあります。
$custom-file-text: (
placeholder: (
en: "Choose file...",
es: "Seleccionar archivo..."
),
button-label: (
en: "Browse",
es: "Navegar"
)
);
ボタンに関しては、.cssファイルで言語を指定すると、次のように表示されます。
.custom-file-control:lang(fr)::before{
content:"PARCOURIR";
}
.custom-file-control:lang(en)::before{
content:"BROWSE";
}
custom-file-controlのプレースホルダーとそのボタンのキャプションを英語以外のページに表示するには-)CSSに追加する必要があります.custom-file-control:before
および.custom-file-control:empty::after
このスニペットのように。
現時点では、 未解決の問題 選択後にカスタムコントロール内のファイル名を取得するために...ここに示すonchange
イベントの回避策を適用できます。
/* Valid for any language */
.custom-file-control:before {
content: "Search";
}
.custom-file-control:empty::after {
content: "Choose a file...";
}
/* Specific for spanish language */
.custom-file-control:lang(es)::before {
content : "Buscar";
}
.custom-file-control:lang(es):empty::after {
content : "Seleccionar un fichero...";
}
<!DOCTYPE html>
<html lang="es-es">
<head>
<title>Test custom-file-control</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="mt-5 ml-5">
<label class="custom-file">
<input type="file" id="file" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])" required>
<span class="custom-file-control"></span>
</label>
</div>
</body>
</html>
私は同じ問題にぶつかり、解決のためにここに来ましたが、それを見つけられなかったので、それを掘り続けました:それを行う正しい方法は、クラスカスタムファイルのdivとその中に入力とラベルを置くことですラベル内に入力します。
<div class="custom-file">
<input type="file" id="Image" class="custom-file-input">
<label class="custom-file" for="Image">Select file to upload</label>
</div>