Я не хочу видеть "файл не выбран" для поля ввода файла

Ответ 1

Вы не можете полностью избавиться от "no file selected", но вы можете изменить текст на что-то, что имеет смысл, установив заголовок.

<input type="file" title="foo">

отобразит "foo" на mouseover вместо "no file selected"

к сожалению,

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

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

Ответ 2

Простейший (и надежный, насколько мне известно) хак, который я нашел, - это установить исходный цвет шрифта прозрачным, чтобы скрыть текст без файла, а затем изменить цвет шрифта на что-то видимое при изменении.

Вуаля:

<input type="file" style="color:transparent;" onchange="this.style.color = 'black';"/>

Ответ 3

Для браузеров Chrome вы можете использовать такой трюк:

<input type="file" id="myFile" name="html" style="width: 90px;" onchange="this.style.width = '100%';" />

Значение фиксированной ширины, которая будет отображать только кнопку, после изменения измените ее на 100%, чтобы отобразилось имя файла.

Ответ 4

<style type="text/css">
#inputcontainer {
    background:url("http://phpfileuploader.com/images/upload.png") no-repeat;
    height:50px;
    width:250px;
}

input[type="file"]{
    opacity:0;
    height:48px;
    width:48px;
}
</style>
<div id="inputcontainer">
    <input type="file" onchange="document.getElementById('file-path').value = this.value.split('\\')[this.value.split('\\').length-1];"/>
    <input type="text" id="file-path"/>
</div>

Ответ 5

Нет, вам нужно создать настраиваемый элемент управления.

Ответ 6

Кажется смешным для простоты, но для меня было достаточно:

input[type='file'] {
  width: 95px;
 }

Протестировано на Chrome 20, Safari 5.1.7 и IE 9.

Примечание: в IE9 немного странно, потому что оставил область mini input_text.

Ответ 7

Попробуйте приведенный ниже код в событии mouseover

jQuery('input').attr('title', ''); 

Ответ 8

Даже если это старый пост, я думаю, что этот ответ будет полезен кому-то, кто хочет сделать что-то подобное. Я хотел, чтобы кнопка вставляла изображение с камеры мобильного устройства, но я не хотел уродливую кнопку "[Выбрать файл] Не выбран файл..." мусор.

Мне нужна кнопка:

• который я мог бы настроить, например. есть кнопка изображения
• пользователь щелкнет по нему, и он попросит их о вводе некоторого файла
• использовать ввод и публикацию на сервере

Что я сделал

• создать элемент кнопки

  • с onclick="someFunction()" и некоторым id="some_id"
  • тег img с src="someimage" - для отображения изображения, а не некоторого текста

• создать элемент ввода

  • с type="file" style"display: none" accept="image/*" capture="camera" id="hidden_input"

• JavaScript

  • Когда я нажимаю кнопку, он запускает функцию clickHiddenInput(), которая будет выполнять событие click выбранного вами элемента

    function clickHiddenInput() {
        document.getElementById("hidden_input").click();
    }
    
    document.getElementById("hidden_input").addEventListener('change', readFile, false);
    
    function readFile(evt) {
    
        if (!(evt.target.files.length < 1)) {
    
            var data = new FormData();
    
            var files = evt.target.files;
            var file = files[0];
    
            data.append("hidden_input", file);
    
            // do some stuff with the file
        }
    }
    

Ответ 9

Попробуйте следующее:

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

Будьте осторожны с пробелом - это важно, потому что title="" не работает.

Ответ 10

Я попытался использовать настройки ширины, но это не работает в firefox. если у вас есть сплошной согласованный фон, вы можете просто установить цвет таким же, как фон. У меня белый фон, поэтому я просто:

input.remove-no-file-chosen
{
   width: 90px;
   color: #fff;
}

Ответ 11

input[type=file]{
       opacity:0;
}

Затем вы можете создать свою коробку в любом стиле. Если вы нажмете на div, он откроет окно проводника файлов.