次のように「ファイルを選択」ボタンがあります（Jadeを使用していますが、Html5と同じである必要があります）。
input(type='file', name='videoFile')
ブラウザでは、「ファイルが選択されていません」というテキストが横に付いたボタンが表示されます。「ファイルが選択されていません」というテキストを「ビデオが選択されていません」や「ビデオを選択してください」などの別のテキストに変更したいと思います。私はここで最初の提案に従いました：
ファイル入力フィールドに「ファイルが選択されていません」と表示したくない
しかし、これを行ってもテキストは変わりませんでした。
input(type='file', name='videoFile', title = "Choose a video please")
誰かが私が問題がどこにあるのかを理解するのを手伝ってくれる？
回答:
ボタンのデフォルトのラベルを変更することはできないと確信しています。ボタンはブラウザにハードコードされています（各ブラウザはボタンのキャプションを独自の方法でレンダリングします）。このボタンスタイリングの記事をチェックしてください
cssで入力を非表示にし、ラベルを追加して入力ボタンに割り当てます。ラベルはクリック可能で、クリックするとファイルダイアログが表示されます。
<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>
次に、必要に応じてラベルをボタンとしてスタイル設定します。
file input、JavaScriptからを非表示にしてクリックすることはできません。ありがとう！
これを試してみてください
<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>
使い方
とても簡単です。Label要素は、「for」タグを使用して、IDでフォームの要素を参照します。この場合、それらの間の参照キーとして「img」を使用しました。完了すると、ラベルをクリックするたびに、フォームの要素クリックイベント（この場合はファイル要素クリックイベント）が自動的にトリガーされます。次に、display：noneとvisibility：hiddenを使用してファイル要素を非表示にして、空のスペースが作成されないようにします。
コーディングをお楽しみください
上記のリンクを参照してください。cssを使用してデフォルトのテキストを非表示にし、ラベルを使用して必要なものを表示します。
<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>
input[type=file]{
width:90px;
color:transparent;
}
window.pressed = function(){
var a = document.getElementById('aa');
if(a.value == "")
{
fileLabel.innerHTML = "Choose file";
}
else
{
var theSplit = a.value.split('\\');
fileLabel.innerHTML = theSplit[theSplit.length-1];
}
};
そうです、アップロード前のファイルのリストがある場合でも、この「ファイルが選択されていません」を削除する方法はありません。
私が見つけた（そしてIE、FF、CRで動作する）最も簡単な解決策は次のとおりです
$('.addfiles').on('click', function() { $('#fileupload').click();return false;});<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>それは完了し、完全に機能します:)
フレッド
$(function () {
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css('color', '#333');
}else{
$(this).css('color', 'transparent');
}
});
})input[type="file"]{
color: transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">ただし、このツールチップを削除しようとすると
<input type='file' title=""/>
これは機能しません。これを機能させるための私のちょっとしたコツです。スペースを入れてタイトルを試してください。それが動作します。：）
<input type='file' title=" "/>
title、私が見るように、属性
HTML
<div class="fileUpload btn btn-primary">
<label class="upload">
<input name='Image' type="file"/>
Upload Image
</label>
</div>
CSS
input[type="file"]
{
display: none;
}
.fileUpload input.upload
{
display: inline-block;
}
注： Btn btn-primaryは、ブートストラップボタンのクラスです。ただし、ボタンの位置がおかしくなっているように見える場合があります。インラインCSSで修正できることを願っています。
.vendor_logo_hide{
display: inline !important;;
color: transparent;
width: 99px;
}
.vendor_logo{
display: block !important;
color: black;
width: 100%;
}
$(document).ready(function() {
// set text to select company logo
$("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
// on change
$('#Uploadfile').change(function() {
// show file name
if ($("#Uploadfile").val().length > 0) {
$(".file_placeholder").empty();
$('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
console.log($("#Uploadfile").val());
} else {
// show select company logo
$('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
$("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
}
});
});.vendor_logo_hide {
display: inline !important;
;
color: transparent;
width: 99px;
}
.vendor_logo {
display: block !important;
color: black;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>
<div>
<p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>入力の幅を変更するだけです。約90px
<input type="file" style="width: 90px" />
<div class="field">
<label class="field-label" for="photo">Your photo</label>
<input class="field-input" type="file" name="photo" id="photo" value="photo" />
</div>
とcss
input[type="file"]
{
color: transparent;
background-color: #F89406;
border: 2px solid #34495e;
width: 100%;
height: 36px;
border-radius: 3px;
}
あなたはそれをこのように試すことができます：
<div>
<label for="user_audio" class="customform-control">Browse Computer</label>
<input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
<span id='button'>Select File</span>
</div>
選択したファイルを表示するには：
$('#button').click(function () {
$("input[type='file']").trigger('click');
})
$("input[type='file']").change(function () {
$('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
$('.customform-control').hide();
})
選択したファイル名を取得してくれた@ unlucky13に感謝します
これがフィドルです：
これは、「ファイルなしでプロフィール写真を選択する」の名前を変更するのに役立ちます
<input type='file'id="files" class="hidden"/>
<label for="files">Select profile picture</label>
私は「ラベル」の代わりに「ボタン」を使用します、これが誰かを助けることを願っています。
これはボタンを表示するだけで、ユーザーがクリックするとファイルチューザーがポップアップし、ファイルを選択すると自動的にアップロードされます。
<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>
<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />
<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />
次のcssコードを使用して非表示にできます（ファイルは選択されていません）
HTML
<input type="file" name="page_logo" id="page_logo">
CSS
input[type="file"]:after {color: #fff}
色が背景色と一致していることを確認します
次の場所に良い例（ファイルタイプの検証を含む）があります。
https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html
これは基本的に、ボタンを使用するというAmosの具体化されたバージョンです。
私は上記の提案のいくつかを試しましたが成功しませんでした（しかし多分それは私です）。
私はそれを使用してExcelファイル変換を行うためにそれを転用しています
<form>
<div>
<label for="excel_converts">Choose a spreadsheet to convert.</label>
<input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" >
</div>
<div class="preview">
<p>No spreadsheet currently selected for conversion</p>
</div>
<div>
<button>Submit</button>
</div>
</form>