it-swarm.com.ru

Как удалить подсказку "Файл не выбран" из файлового ввода в Chrome?

Я хотел бы удалить всплывающую подсказку «Не выбран файл» из файла, введенного в Google Chrome (я вижу, что подсказка не отображается в Firefox).

Обратите внимание, что я говорю не о тексте внутри поля ввода, а о всплывающей подсказке, которая появляется, когда вы наводите курсор мыши на ввод.

Я попробовал это без удачи:

$('#myFileInput').attr('title', '');
66
German Latorre

Это встроенная часть браузеров webkit, и вы не можете удалить ее. Вы должны подумать о хакерском решении, таком как покрытие или скрытие входные данные файла. 

A hacky решение:

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, ''))
})    

Fiddle

54
undefined

Для меня, я просто хотел, чтобы текст был невидимым и все еще использовал кнопку браузера.

input[type='file'] {
  color: transparent;
}

Мне нравятся все предложения от undefined, но у меня был другой вариант использования, надеюсь, это поможет кому-то в той же ситуации.

48
Dwayne Forde

подсказка по умолчанию может быть отредактирована с помощью атрибута title

<input type='file' title="your text" />

Но если вы попытаетесь удалить эту подсказку 

<input type='file' title=""/>

Это не сработает. Вот мой маленький трюк, чтобы попробовать это, попробуйте название с пробелом. Это будет работать.:)

<input type='file' title=" "/>
42
simon

Вы можете отключить всплывающую подсказку, указав заголовок с пробелом в веб-браузерах, таких как Chrome, и пустую строку в Firefox или IE (протестировано в Chrome 35, FF 29, IE 11, Safari Mobile)

$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
8
jbier

Очень просто, забудьте про CSS, предназначенный для ввода ["type"), это не работает для меня. Я не знаю почему. Я получил свое решение в своем теге HTML

<input type="file" style="color:transparent; width:70px;"/>

Конец проблемы

5
Lawel

Этот работает для меня (по крайней мере, в Chrome и Firefox):

<input type="file" accept="image/*" title="&nbsp;"/>
5
Андрей Куценко

Я нашел решение, очень просто установить пробел в атрибуте title.

<input type="file" value="" title=" " />
4
JNTN B77

Во всех браузерах и просто. это сделало это для меня 

$(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">

4
Ifeanyi Chukwu

Все ответы здесь сильно усложнены или, в противном случае, совершенно неверны.

hTML:

<div>
    <input type="file" />
    <button>Select File</button>
</div>

cSS:

input {
    display: none;
}

javaScript:

$('button').on('click', function(){
   $('input').trigger('click'); 
});

http://jsfiddle.net/odfe34n8/

Я создал эту скрипку самым простым способом. Нажатие на кнопку «Выбрать файл» вызовет меню выбора файла. Затем вы можете стилизовать кнопку так, как вам хочется. По сути, все, что вам нужно сделать, это скрыть файл ввода и вызвать искусственный щелчок по нему при нажатии другой кнопки. Я протестировал это на IE 9, FF и Chrome, и все они работают нормально.

4
LadyCailin

Это хитрый. Я не смог найти способ выбрать элемент «no file selected», поэтому создал маску с помощью псевдо-селектора: after.

Мое решение также требует использования следующего псевдо-селектора для стиля кнопки:

::-webkit-file-upload-button

Попробуйте это: http://jsfiddle.net/J8Wfx/1/

К вашему сведению: это будет работать только в браузерах webkit.

P.S., если кто-нибудь знает, как просматривать псевдо-селекторы webkit, как, например, выше в инспекторе webkit, пожалуйста, дайте мне знать

4
jameswakefield

Вам нужно будет настроить контроль довольно много, чтобы достичь этого.

Пожалуйста, следуйте руководству по адресу: http://www.quirksmode.org/dom/inputfile.html

3
Ryan McDonough

Оберните и сделайте невидимым .... Работайте в Chrome, Safari && FF.

label { 
  padding: 5px;
  background: silver;
}
label > input[type=file] {
    display: none;
}
<label>
  <input type="file">
  select file
</label>

1
Vladimir Ishenko

Лучше избегать использования ненужного JavaScript. Вы можете воспользоваться тегом label, чтобы развернуть цель клика для ввода следующим образом:

<label>
  <input type="file" style="display: none;">
  <a>Open</a>
</label>

Несмотря на то, что ввод скрыт, ссылка по-прежнему работает для него как цель щелчка, и вы можете стилизовать ее так, как хотите.

1
TimE

Дайте -webkit-appearance: идти. Стоит попробовать в любом случае.

http://css-infos.net/property/-webkit-appearance

Надеюсь, это поможет :)

1
will

Напрямую вы не можете многое изменить в input [type = file].

Установите непрозрачность файла типа ввода: 0 и попробуйте поместить относительный элемент [div/span/button] поверх него с помощью пользовательского CSS 

Попробуйте это http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

1
Champ

Даже если вы установите прозрачность на ноль, появится всплывающая подсказка. Попробуйте visibility:hidden на элементе. Это работает для меня.

1
Raa Vijay

Сюрприз, чтобы никто не упомянул о event.preventDefault()

$("input[type=file]").mouseover(function(event) {
    event.preventDefault();
    // This will disable the default behavior of browser
 });
0
Kenny

Лучшее решение для меня, это обернуть input [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>

0
Alex Black

Объединяя некоторые из предложений выше, используя jQuery, вот что я сделал:

input[type='file'].unused {
  color: transparent;
}

А также:

$(function() {
  $("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};

И поместите класс "неиспользуемый" в ваши входные данные файла. Это просто и работает довольно хорошо.

0
Data Helper

Я придумал хакерское решение, которое полностью удаляет «Файл не выбран» плюс дополнительное пространство, добавляемое после этого текста (в Chrome я получаю что-то вроде: «Файл не выбран»). 

Это полностью испортило мое выравнивание страниц, поэтому я действительно боролся с этим, чтобы найти решение. Внутри атрибута стиля входного тега установка «ширины» в ширину кнопки устранит завершающий текст и пробелы. Поскольку ширина кнопки не одинакова во всех браузерах (например, она немного меньше в Firefox), вы также захотите установить цвет стиля, совпадающий с цветом фона страницы (в противном случае - «блуждающий» Нет "может просвечивать). Мой тег входного файла выглядит следующим образом: 

<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">    
0
TonyLuigiC

Я ищу хороший ответ для этого ... и я нашел это:

Сначала удалите «файл не выбран»

input[type="file"]{
font-size: 0px;
}

затем нажмите кнопку -webkit-file-upload-button, вот так:

input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}

надеюсь, это то, что вы искали, это работает для меня.

0
devash23

Меня устраивает!

input[type="file"]{
  font-size: 0px;
}

Затем вы можете использовать различные виды стилей, такие как width, height или другие свойства, чтобы создать свой собственный входной файл.

0
slorenzo

вы можете установить ширину для вашего элемента, который будет показывать только кнопку и будет скрывать «файл не выбран».

0
Sotiris