更改“没有select的文件”：
我有一个button“select文件”如下（我正在使用翡翠，但它应该是相同的Html5）：
input(type='file', name='videoFile') 在浏览器中显示一个button旁边的文本“没有select文件”。 我想将“无文件select”文本更改为其他内容，如“无videoselect”或“请selectvideo”。 我在这里遵循了第一个build议：
我不想看到“没有select文件”的文件input字段
但是这样做并没有改变文本：
input(type='file', name='videoFile', title = "Choose a video please")
有谁能帮我弄清楚问题在哪里？
我很确定你不能改变button上的默认标签，它们在浏览器中被硬编码（每个浏览器以自己的方式渲染button标题）。 看看这个button造型文章
用css隐藏input，添加一个标签并将其分配给inputbutton。 标签会被点击，点击后会popup文件对话框。
<input type="file" id="files" class="hidden"/> <label for="files">Select file</label>
然后，如果需要，将标签设置为button。
看上面的链接。 我使用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]; } };
对，即使你有一个预先上传的文件列表，没有办法删除这个“没有文件select”。
我发现最简单的解决scheme（并在IE，FF，CR上工作）如下
- 隐藏你的input并添加一个“文件”button
- 然后调用“文件”button，并要求他绑定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;'>
$(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=" "/>
像这样的东西可以工作
input(type='file', name='videoFile', value = "Choose a video please")
试试这只是一个把戏
<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和not visibility：hidden来使文件元素不可见，这样它就不会创build空的空间。
享受编码
.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>
<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获取选定的文件名
这里是工作小提琴：
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是一类引导button。 然而，button可能看起来在位。 希望你可以通过内联的CSS来解决它。
只要改变input的宽度。 大约90px
<input type="file" style="width: 90px" />
这将帮助您更改名称为“无文件selectselect个人资料图片”
<input type='file'id="files" class="hidden"/> <label for="files">Select profile picture</label>
