可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I have a button "Choose file" as follows (I am using Jade but it should be the same as Html5):
input(type='file', name='videoFile')
In the browser this shows a button with a text next to it "No file chosen". I would like to change the "No file chosen" text to something else, like "No video chosen" or "Choose a video please". I followed the first suggestions here:
I don't want to see 'no file chosen' for a file input field
But doing this did not change the text:
input(type='file', name='videoFile', title = "Choose a video please")
Can anybody help me figure out where the problem is?
回答1:
I'm pretty sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). Check out this button styling article
回答2:
Hide the input with css, add a label and assign it to input button. label will be clickable and when clicked, it will fire up the file dialog.
<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>
Then style the label as a button if you want.
回答3:
Try this its just a trick
<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>
How it works
It's very simple. the Label element uses the "for" tag to reference to a form's element by id. In this case, we used "img" as the reference key between them. Once it is done, whenever you click on the label, it automatically trigger the form's element click event which is the file element click event in our case. We then make the file element invisible by using display:none and not visibility:hidden so that it doesn't create empty space.
Enjoy coding
回答4:
http://jsfiddle.net/ZDgRG/
See above link. I use css to hide the default text and use a label to show what I want:
<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];
}
};
回答5:
Right, there is no way to remove this 'no file choosen', even if you have a list of pre-upload files.
Simplest solution I've found (and works on IE, FF, CR) is the following
- Hide your input and add a 'files' button
- then call the 'files' button and ask him to bind fileupload (I'm using JQuery in this example)
$('.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;'>
It's done, works perfectly :)
Fred
回答6:
$(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">
回答7:
But if you try to remove this tooltip
<input type='file' title=""/>
This wont work. Here is my little trick to work this, try title with a space. It will work.:)
<input type='file' title=" "/>
回答8:
Something like this could work
input(type='file', name='videoFile', value = "Choose a video please")
回答9:
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;
}
Note: Btn btn-primary is a class of bootstrap button. However the button may look weired in position. Hope you can fix it by inline css.
回答10:
.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>
回答11:
using label with label text changed
<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>
add jquery
<script>
$("#files").change(function(){
$("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");
});
</script>
回答12:
<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>
and the css
input[type="file"]
{
color: transparent;
background-color: #F89406;
border: 2px solid #34495e;
width: 100%;
height: 36px;
border-radius: 3px;
}
回答13:
You can try it this way:
<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>
To show the selected file:
$('#button').click(function () {
$("input[type='file']").trigger('click');
})
$("input[type='file']").change(function () {
$('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
$('.customform-control').hide();
})
Thanks to @unlucky13 for getting selected file name
Here is working fiddle:
http://jsfiddle.net/eamrmoc7/
回答14:
Just change the width of the input. Around 90px
<input type="file" style="width: 90px" />
回答15:
This will help you to change the name for "no file choose to Select profile picture"
<input type='file'id="files" class="hidden"/>
<label for="files">Select profile picture</label>
回答16:
I would use "button" instead of "label", hope this help someone.
This will just display a button, user clicked will popup file chooser, after file chose, automatically upload.
<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;" />
