Я хотел бы удалить всплывающую подсказку "Нет файлов" из ввода файла в Google Chrome (я вижу, что всплывающая подсказка не отображается в Firefox).
Обратите внимание, что я говорю не о тексте внутри поля ввода, а о всплывающей подсказке, которая появляется при перемещении мыши над входом.
Я пробовал это без везения:
$('#myFileInput').attr('title', '');
Это родная часть веб-браузеров, и вы не можете ее удалить. Вы должны думать о хакерских решениях, таких как покрытие или скрытие входных файлов.
Хакерное решение:
input[type='file'] {
opacity:0
}
<div>
<input type='file'/>
<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, ''))
})
Для меня я просто хотел, чтобы текст был невидимым и по-прежнему использовал собственную кнопку браузера.
input[type='file'] {
color: transparent;
}
Мне нравятся все предложения undefined, но у меня был другой вариант использования, надеюсь, что это поможет кому-то в той же ситуации.
всплывающая подсказка по умолчанию может быть отредактирована с помощью атрибута title
<input type='file' title="your text" />
Но если вы попытаетесь удалить эту подсказку
<input type='file' title=""/>
Это не работает. Вот мой маленький трюк, чтобы работать над этим, попробуйте название с пробелом. Он будет работать.:)
<input type='file' title=" "/>
Вы можете отключить всплывающую подсказку, устанавливая заголовок с пространством в браузерах веб-китов, таких как Chrome, и пустую строку в Firefox или IE (проверено на мобильных устройствах Chrome 35, FF 29, IE 11, сафари)
$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
Я нашел решение, которое очень легко, просто установите пустую строку в атрибут заголовка.
<input type="file" value="" title=" " />
Этот работает для меня (по крайней мере, в Chrome и Firefox):
<input type="file" accept="image/*" title=" "/>
Очень просто, забудьте CSS, ориентируясь на ввод [ "type" ], это не работает для меня. Я не знаю почему. Я получил свое решение в своем теге HTML
<input type="file" style="color:transparent; width:70px;"/>
Конец проблемы
Это сложно. Я не мог найти способ выбрать элемент "no file selected", поэтому создал маску с помощью: после псевдоселектора.
Мое решение также требует использования следующего псевдоселектора для стилизации кнопки:
::-webkit-file-upload-button
Попробуйте следующее: http://jsfiddle.net/J8Wfx/1/
FYI: Это будет работать только в браузерах webkit.
P.S, если кто-нибудь знает, как просматривать псевдо-селеры webkit, такие как выше, в инспекторе webkit, пожалуйста, дайте мне знать
Все ответы здесь полностью сложны, или иначе просто совершенно неправильно.
HTML:
<div>
<input type="file" />
<button>Select File</button>
</div>
CSS
input {
display: none;
}
JavaScript:
$('button').on('click', function(){
$('input').trigger('click');
});
Я создал эту скрипку самым простым способом. При нажатии кнопки "Выбрать файл" открывается меню выбора файлов. Вы могли бы стилизовать кнопку так, как хотите. В принципе, все, что вам нужно сделать, это скрыть ввод файла и вызвать синтетический щелчок по нему при нажатии другой кнопки. Я тестировал это на IE 9, FF и Chrome, и все они работают нормально.
Вам нужно будет настроить элемент управления для достижения этого.
Пожалуйста, следуйте инструкциям: http://www.quirksmode.org/dom/inputfile.html
Во всех браузерах и просто. это сделало это для меня
$(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">Оберните и сделайте невидимым. Работа в Chrome, Safari && FF.
label {
padding: 5px;
background: silver;
}
label > input[type=file] {
display: none;
}<label>
<input type="file">
select file
</label>Дайте -webkit-appearance: a go. В любом случае стоит попробовать.
http://css-infos.net/property/-webkit-appearance
Надеюсь, что помогает:)
Непосредственно вы не можете многое изменить для ввода [type = file].
Сделайте непрозрачность файла типа ввода: 0 и попробуйте поместить относительный элемент [div/span/button] поверх него с помощью специального CSS
Попробуйте это http://jsfiddle.net/gajjuthechamp/pvyVZ/8/
Лучше избегать использования ненужного javascript. Вы можете воспользоваться тегом меток, чтобы развернуть цель щелчка ввода так:
<label>
<input type="file" style="display: none;">
<a>Open</a>
</label>
Несмотря на то, что ввод скрыт, ссылка по-прежнему работает как цель клика для него, и вы можете стилизовать его, как хотите.
Даже если вы установите непрозрачность на ноль, появится всплывающая подсказка. Попробуйте visibility:hidden на элементе. Это работает для меня.
Сюрприз, чтобы никто не упомянул про event.preventDefault()
$("input[type=file]").mouseover(function(event) {
event.preventDefault();
// This will disable the default behavior of browser
});
вы можете установить ширину для элемента yor, который отобразит только кнопку и скроет "no file selected".
Я ищу хороший ответ для этого... и я нашел это:
Сначала удалите "no file selected"
input[type="file"]{
font-size: 0px;
}
затем запустите кнопку с -webkit-file-upload-button, следующим образом:
input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}
надеюсь, что это то, что вы искали, оно работает для меня.
Объединив некоторые из приведенных выше предложений, используя jQuery, вот что я сделал:
input[type='file'].unused {
color: transparent;
}
и
$(function() {
$("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};
И поместите класс "unused" в ваши файлы. Это просто и работает очень хорошо.
Лучшим решением для меня является перенос ввода [ type="file"] в оболочку и добавление некоторого кода jquery:
$(function(){
function readURL(input){
if (input.files && input.files[0]){
var reader = new FileReader();
reader.onload = function (e){
$('#uploadImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#image").change(function(){
readURL(this);
});
});#image{
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 75px;
height: 35px;
}
#uploadImage{
position: relative;
top: 30px;
left: 70px;
}
.button{
position: relative;
width: 75px;
height: 35px;
border: 1px solid #000;
border-radius: 5px;
font-size: 1.5em;
text-align: center;
line-height: 34px;
}<form action="#" method="post" id="form" >
<div class="button">
Upload<input type="file" id="image" />
</div>
<img id="uploadImage" src="#" alt="your image" width="350" height="300" />
</form>Я придумал хакерское решение, которое полностью удаляет "No file selected" плюс дополнительное пространство, которое добавляется после этого текста (в Chrome я получаю что-то вроде: "Файл не выбран" ).
Это полностью перепутало мое выравнивание страницы, поэтому я действительно сражался с ним, чтобы найти решение. Внутри атрибута стиля входного тега установка ширины в ширину кнопки приведет к удалению завершающего текста и пробелов. Так как ширина кнопки не одинакова во всех браузерах (например, она немного меньше в Firefox), вы также хотите установить цвет стиля того же цвета, что и фон страницы (в противном случае - Нет "может показаться). Мой тег входного файла выглядит следующим образом:
<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">
Это работает для меня!
input[type="file"]{
font-size: 0px;
}
Затем вы можете использовать различные стили, такие как width, height или другие свойства, чтобы создать свой собственный входной файл.