Як я можу видалити підказку "Не вибрано файл" із файлу, який вводиться в Chrome?

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

Зверніть увагу, що я говорю не про текст усередині поля введення, а про підказку, яка з’являється, коли ви наводите курсор миші на введення.

Я пробував це без удачі:

$('#myFileInput').attr('title', '');

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

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

Скрипка

Підказку за замовчуванням можна відредагувати, використовуючи атрибут title

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

Але якщо ви спробуєте видалити цю підказку

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

Це не спрацює. Ось мій маленький фокус, щоб це зробити, спробуйте заголовок з пробілом. Це спрацює. :)

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

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

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

Мені подобаються всі невизначені пропозиції, але у мене був інший варіант використання, сподіваюся, це допомагає комусь у тій самій ситуації.

Я знайшов дуже просте рішення, просто встановив порожній рядок в атрибуті title.

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

Ви можете вимкнути підказку, встановивши заголовок, із пробілом у веб-браузерах, таких як Chrome, і порожнім рядком у Firefox або IE (протестовано на Chrome 35, FF 29, IE 11, safari mobile)

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

Дуже просто, забудьте CSS, націлений на введення ["type"], це не працює для мене. Не знаю чому. Я отримав своє рішення у своєму тегу HTML

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

Кінець проблеми

Всі відповіді тут абсолютно ускладнені, або в іншому випадку просто абсолютно помилкові.

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, і всі вони працюють нормально.

Це працює для мене (принаймні в Chrome та Firefox):

<input type="file" accept="image/*" title="&nbsp;"/>

Це складно. Я не міг знайти спосіб вибрати елемент "не вибрано файл", тому створив маску за допомогою псевдоселектора: after.

Моє рішення також вимагає використання наступного псевдоселектора для стилізації кнопки:

::-webkit-file-upload-button

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

FYI: Це буде працювати лише у браузерах webkit.

PS, якщо хтось знає, як переглядати псевдоселектори webkit, як наведений вище, в інспекторі webkit, будь ласка, дайте мені знати

У всіх браузерах і просто. це зробило це для мене

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

Для досягнення цього вам потрібно буде налаштувати управління досить багато.

Будь ласка, дотримуйтесь керівництва на: http://www.quirksmode.org/dom/inputfile.html

Оберніть і зробіть невидимими. Працюйте в Chrome, Safari && FF.

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

<label>
  <input type="file">
  select file
</label>

Краще уникати використання непотрібного javascript. Ви можете скористатися тегом мітки, щоб розширити ціль кліку вводу таким чином:

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

Незважаючи на те, що введення приховано, посилання все одно працює як ціль для нього, і ви можете стилізувати його як завгодно.

Навіть якщо ви встановите нульову непрозорість, з’явиться підказка. Приміряйте visibility:hiddenстихію. Це працює для мене.

Дайте -webkit-appearance:ходу. У будь-якому разі варто спробувати.

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

Сподіваюся, що це допомагає :)

Безпосередньо ви не можете багато чого змінити щодо вводу [type = file].

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

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

Це працює для мене!

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

Потім ви можете використовувати різні типи стилів, такі як width, heightабо інші властивості, щоб створити власний вхідний файл.

Сюрприз, коли ніхто не згадав про це event.preventDefault()

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

Ви можете встановити ширину для елемента yor, яка відображатиме лише кнопку та приховуватиме "не вибраний файл".

Я шукаю хорошу відповідь на це ... і знайшов таке:

Спочатку видаліть "файл не вибрано"

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

І поставте клас "невикористаний" на ваші вхідні файли. Це просто і працює досить добре.

Для мене найкращим рішенням є обгортання вводу [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>

Я придумав хакерське рішення, яке повністю видаляє "Не вибрано жодного файлу", а також зайвий простір, який додається після цього тексту (у Chrome я отримую щось на зразок: "Не вибраний файл").

Це повністю зіпсувало моє вирівнювання сторінки, тому я справді боровся з ним, щоб знайти рішення. Всередині атрибута стилю вхідного тегу, встановивши "ширину" на ширину кнопки, ви усунете кінцевий текст та пробіли. Оскільки ширина кнопки не однакова у всіх браузерах (наприклад, вона трохи менша у Firefox), ви також захочете встановити колір стилю таким же кольором, як фон сторінки (інакше бродячий " Ні "може відображатися наскрізь". Мій тег вхідного файлу виглядає так:

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

Я знаю, що це трохи зламати, але все, що мені потрібно, - це встановити колір прозорим у таблиці стилів - вбудований виглядатиме так: style = "color: transparent;".