「ファイルが選択されていません」を変更します。
次のように「ファイルを選択」ボタンがあります（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>
次に、必要に応じてラベルをボタンとしてスタイルします。
上記のリンクを参照してください。 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];
}
};
これをちょっと試してみてください
<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>
仕組み
とても簡単です。 Label要素は "for"タグを使用して、フォームの要素をidで参照します。この場合、それらの間の参照キーとして「img」を使用しました。それが完了すると、ラベルをクリックするたびに、フォームの要素クリックイベントが自動的にトリガーされます。このイベントは、この例ではファイル要素クリックイベントです。次に、空のスペースが作成されないように、visibility：hiddenではなくdisplay：noneを使用して、ファイル要素を非表示にします。
コーディングをお楽しみください
事前アップロードファイルのリストがある場合でも、この「ファイルが選択されていません」を削除する方法はありません。
私が見つけた（そしてIE、FF、CRで動作する）最も簡単な解決策は次のとおりです
- 入力を非表示にし、「ファイル」ボタンを追加します
- 次に、「ファイル」ボタンを呼び出し、fileuploadをバインドするように依頼します（この例ではJQueryを使用しています）
$('.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;'>それは完了し、完璧に動作します:)
フレッド
ただし、このツールチップを削除しようとすると
<input type='file' title=""/>
これは動作しません。これを機能させるためのちょっとしたコツです。タイトルをスペースで試してみてください。それが動作します。：）
<input type='file' title=" "/>
$(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"> .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>このような何かが動作する可能性があります
input(type='file', name='videoFile', value = "Choose a video please")
この方法で試すことができます：
<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に感謝
作業フィドルは次のとおりです。
<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;
}
ラベルテキストを変更したラベルの使用
<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>
jqueryを追加
<script>
$("#files").change(function(){
$("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");
});
</script>
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はbootstrapボタンのクラスです。ただし、ボタンの位置が不自然に見える場合があります。インラインcssで修正できることを願っています。
これにより、「プロファイル画像を選択するファイルを選択しない」の名前を変更できます。
<input type='file'id="files" class="hidden"/>
<label for="files">Select profile picture</label>
入力の幅を変更するだけです。約90ピクセル
<input type="file" style="width: 90px" />
「ラベル」の代わりに「ボタン」を使用します。これが誰かの助けになることを願っています。
これはボタンを表示するだけで、ユーザーがクリックするとファイル選択がポップアップされ、ファイルが選択された後、自動的にアップロードされます。
<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;" />