тип ввода = кнопка показа файла

154

Есть ли способ стилизовать (или скрипт) <input type=file />элемент, чтобы была видна только кнопка «Обзор» без текстового поля?

Спасибо

Изменить : Просто чтобы уточнить, зачем мне это нужно. Я использую многофайловый код загрузки с http://www.morningz.com/?p=5, и ему не нужно вводить текстовое поле, потому что оно никогда не имеет значения. Скрипт просто добавляет новый выбранный файл в коллекцию на странице. Было бы намного лучше без текстового поля, если это возможно.

javascript html css Андрия
источник

169

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Это, безусловно, сработает, я использовал его в своих проектах. Надеюсь, это поможет :)

шиба
источник

1

Этот ответ очень прост и элегантен и работает для всех браузеров.

Mike.C.Ford

Это, безусловно, лучшее решение, которое я нашел. Это устраняет некоторые причудливые стили ввода файлов в разных мобильных браузерах. Теперь мой элемент управления вводом файлов не выделяется, как больной большой палец, с остальной частью моего макета. Большое спасибо, жаль, что я не мог проголосовать больше, чем 1.

Highdown

... и добавить onchange = "this.form.submit ();" в элемент «Входной файл», чтобы начать загрузку после выбора файла. Не забудьте обернуть все элементы тегом Form.

Томас

1

Это не будет работать в IE8 и ниже, так как при отправке формы вы получите ошибку «Отказано в доступе» (вы не можете инициировать ввод файлов с помощью js в IE8 и ниже по «соображениям безопасности»)

unenthusiasticuser

3

@unenthusiasticuser правильный и не будет работать в ipad по той же причине безопасности. :)

Махи

80

У меня было чертовски много времени, пытаясь достичь этого. Я не хотел использовать решение Flash, и ни одна из библиотек jQuery, на которые я смотрел, не была надежной во всех браузерах.

Я придумал собственное решение, которое полностью реализовано в CSS (за исключением изменения стиля onclick, чтобы кнопка выглядела «нажатой»).

Вы можете попробовать рабочий пример здесь: http://jsfiddle.net/VQJ9V/307/ (протестировано в FF 7, IE 9, Safari 5, Opera 11 и Chrome 14)

Он работает, создавая большой файл ввода (с font-size: 50px), затем оборачивая его в div, который имеет фиксированный размер и переполнение: скрытый. Ввод затем виден только через этот «оконный» div. Элементу div можно присвоить фоновое изображение или цвет, текст можно добавить, а ввод можно сделать прозрачным, чтобы раскрыть фон div:

HTML:

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/>
</div>

CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

Дайте мне знать, если с этим возникнут проблемы, и я постараюсь их исправить.

ampersandre
источник

4

это было лучшее решение, с которым я столкнулся, которое работало со всеми браузерами

Fatal

2

Ты мужчина. Я боролся с этой проблемой на FF, и ваше решение - единственное, которое действительно работает, особенно с большими кнопками, увеличивая их активную область, используя "размер шрифта". Спасибо! :)

jpincheira

2

Отличный без использования сценария

Буджи

1

Твиттер делает это, но это было немного запутанным по сравнению с этим. Работает хорошо для меня!

том один

хорошее решение! Только один вопрос: почему бы вам не дать ширине .fileInput 100% и установить ширину .inputWrapper в значение auto?

Луин

52

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

Потом я вспомнил, что видел пример для загрузки файла JQuery без текстового поля. Поэтому я взял их пример и урезал до соответствующей части.

Это решение по крайней мере работает для IE и FF и может быть полностью стилизовано. В приведенном ниже примере ввод файла скрыт под причудливой кнопкой «Добавить файлы».

<html>

<head>
    <title>jQuery File Upload Example</title>
    <style type="text/css">
        .myfileupload-buttonbar input
        {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            border: solid transparent;
            border-width: 0 0 100px 200px;
            opacity: 0.0;
            filter: alpha(opacity=0);
            -o-transform: translate(250px, -50px) scale(1);
            -moz-transform: translate(-300px, 0) scale(4);
            direction: ltr;
            cursor: pointer;
        }
        .myui-button
        {
            position: relative;
            cursor: pointer;
            text-align: center;
            overflow: visible;
            background-color: red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="fileupload" >
        <div class="myfileupload-buttonbar ">
            <label class="myui-button">
                <span >Add Files</span>
                <input id="file" type="file" name="files[]" />
            </label>
        </div>
    </div>
</body>
</html>

tmanthey
источник

4

Важной частью является то, что переполнение контейнера установлено скрытым.

Максим Павлов

1

По крайней мере, это сработало для меня в IE & Chrome. Спасибо :)

Кевин Дарк

1

border-width: 0 0 100px 200px; у меня тоже работал в IE и Chrome. Спасибо.

Пол

2

Если бы я задал оригинальный вопрос, у меня была бы порядочность пометить это как ответ. Спасибо.

Марк Рендл

Лучший ответ ниже. Используйте метку, скрыв ввод. Прекрасно работает!

человек

25

Скройте элемент input-file и создайте видимую кнопку, которая вызовет событие click этого input-файла.

Попробуй это:

CSS

#file { width:0; height:0; }

HTML:

<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>

JAVASCRIPT (Jquery):

$(function(){
    $('#btn-upload').click(function(e){
        e.preventDefault();
        $('#file').click();}
    );
});

Jojo
источник

Я создал плагин jQuery, который сделает всю эту работу за вас: github.com/mbitto/jquery.buttonFile

Мануэль Битто

Это не работает в более новых версиях IE. Косвенный щелчок приводит к тому, что IE отключается и запрещает доступ. Это раздражает.

Андрей

20

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

<input type="file" name="imageUpload" id="imageUpload" class="hide"/> 
<label for="imageUpload" class="button-style">Select file</label>

Добавьте стиль к метке в виде кнопки.
Live Demo

Суреш Патту
источник

1

Сегодня в Safari отлично работает 4 февраля 2015 г.

gman

Это может быть самый простой и лучший ответ. Я бы также добавил onchangeобработчик, inputчтобы некоторый код JS мог получить информацию о загруженном файле.

Дэвид Р. Триббл

16

Это будет очень сложно. Проблема с типом ввода файла состоит в том, что он обычно состоит из двух визуальных элементов, а обрабатывается как один DOM-элемент. Добавьте к этому, что несколько браузеров имеют свой собственный внешний вид для ввода файлов, и вы настроены на кошмар. См. Эту статью на quirksmode.org о странностях, которые имеет входной файл. Я гарантирую вам, что это не сделает вас счастливым (я говорю из опыта).

[РЕДАКТИРОВАТЬ]

На самом деле, я думаю, вам может быть неудобно помещать свои данные в элемент контейнера (например, в div) и добавлять к элементу отрицательное поле. Эффективно скрывая часть текстового поля вне экрана. Другой вариант - использовать технику в статье, которую я связал, чтобы попытаться оформить ее как кнопку.

Эрик ван Бракель
источник

4

Эта статья о причудливом режиме великолепна. Стилизация файловых вводов все еще остается проблемой. : P

MitMaro

Я не думаю, что содержащийся netagive-margin будет хорошо работать, если учесть разные стили браузера и минимальный размер шрифта, различающийся от пользователя к пользователю.

Джоберт

1

Джоберт: Я согласен, я думаю, что лучшим вариантом остается техника, показанная в статье о причудливой моде, как болезненно хакерски ...

Эрик ван Бракел

14

Исправлена работа во всех браузерах.

      <input type = "button" value = "Choose image" 
       onclick ="javascript:document.getElementById('imagefile').click();">
      <input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>

Я тестировал в FF, Chrome & IE - работает нормально, применял стили тоже: D

Хавьер Рейес
источник

6

Я почти уверен, что он не работает на целом ряде браузеров (включая FF и IE, когда я последний раз тестировал) - единственным браузером, над которым я работал, был Chrome.

Герман Шааф

Это работает только с jQuery, но это не отдельное решение.

Соленоид

3

Это появляется на работе (она вызывает меню выбора файлов), но когда форма была отправлена, файл не отправляется в FireFox и IE, по соображениям безопасности.

амперсандр

13

Я попытался реализовать два лучших решения, и это оказалось ОГРОМНОЙ тратой времени для меня. В конце концов, применение этого класса .css решило проблему ...

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

Готово! супер чистый и супер простой ...

nikotromus
источник

1

Это отличный метод!

Каов

9

Еще один простой способ сделать это. Сделайте тег «тип файла ввода» в HTML и скрыть его. Затем нажмите кнопку и отформатируйте ее в соответствии с потребностями. После этого используйте javascript / jquery, чтобы программно щелкнуть тег ввода при нажатии кнопки.

HTML: -

<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>

JavaScript: -

document.getElementById('button').addEventListener("click", function() {
    document.getElementById('file').click();
});

JQuery: -

$('#button').click(function(){
    $('#file').click();
});

CSS: -

#button
{
    background-color: blue;
    color: white;
}

Вот рабочая скрипка JS для того же: - http://jsfiddle.net/32na3/

divyenduz
источник

2

Это отличное решение, но я не могу заставить его работать в Chrome. Очевидно, другие тоже не могут. Opera и Chrome не разрешают щелкать файл ввода по соображениям безопасности. Здесь вы можете найти больше об этом и решении, которое работало для меня: stackoverflow.com/a/3030174/2650732

wojjas

Еще когда я писал этот ответ, он работал на Chrome. Спасибо, что

сообщили

7

Я использовал часть кода, рекомендованного выше, и после многих часов траты своего времени, я в конечном итоге пришел к решению css bag free.

Вы можете запустить его здесь - http://jsfiddle.net/WqGph/

но потом нашел лучшее решение - http://jsfiddle.net/XMMc4/5/

 <input type = "button" value = "Choose image #2" 
   onclick ="javascript:document.getElementById('imagefile').click();">
       <input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>

GoreOle
источник

Проблема в том, что onchangeсобытие не запускается для скрытого inputэлемента.

Дэвид Р. Триббл

6

Вот мое хорошее старое лекарство:

<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>

По крайней мере, это сработало в Safari.

Легко и просто.

Zooza S
источник

4

Вы можете пометить изображение, чтобы при нажатии на него происходило событие нажатия кнопки. Вы можете просто сделать обычную кнопку невидимой:

<form>
    <label for="fileButton"><img src="YourSource"></label>    <!--You don't have to put an image here, it can be anything you like-->
    <input type="file" id="fileButton" style="display:none;"/>
</form>

Он работал для меня во всех браузерах и очень прост в использовании.

Д-изобретатель
источник

4

Вы можете отправить событие нажатия на скрытый файл ввода следующим образом:

<form action="#type your action here" method="POST" enctype="multipart/form-data">
   		<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
    	<!-- hide input[type=file]!-->
    	<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
    	<input type="submit" value='submit' >
    </form>

    <script type="text/javascript">
    	var btn = document.getElementById("yourBtn");
    	var upfile = document.getElementById("upfile"); 
    	btn.addEventListener('click',function(){
    		if(document.createEvent){
    			var ev = document.createEvent('MouseEvents');
    			ev.initEvent('click',true,false);
    			upfile.dispatchEvent(ev);
    		}else{
        		upfile.click();
    		}
    	});
    
    </script>

Развернуть фрагмент

Цзян Мин
источник

var ev = document.createEvent('HTMLEvents'); изменить HTMLEvents на MouseEventsvar ev = document.createEvent('MouseEvents');

Цзян

Хорошо, спасибо! Я конвертировал ваш пост в фрагмент кода для запуска и изменил HtmlEvents на MouseEvents

Фабиан Шменглер,

4

HTML:

<input type="file" name="upload" id="upload" style="display:none"></input>
    <button  id="browse">Upload</button>

Jquery

 $(document).ready(function(){
        $("#browse").click(function(){
        $("#upload").click();
        });
 });

Надеюсь, это работает :)

Anoop Saju
источник

4

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

Никакого JavaScript не требуется, ясно, кросс-браузер еще в IE 9

Например,

input {color: rgba(0, 0, 0, 0);}

nicholmen
источник

3

У меня есть действительно хакерское решение с этим ...

<style type="text/css"> 
    input[type="file"]
    { 
        width: 80px;        
    } 
</style>

<input id="File1" type="file" />

Проблема в том, что атрибут width, скрывающий текстовое поле, будет заметно различаться в разных браузерах, в разных темах Windows XP и так далее. Может быть, это то, с чем вы можете работать, хотя? ...

источник

Даже этот не будет работать на IE6, браузер не понимает селекторы атрибутов.

Адриан Годонг

3

Я знаю, что это старый пост, но простой способ сделать текст исчезнувшим - просто установить цвет текста на ваш фон.

например, если ваш фон ввода текста белый, то:

input[type="file"]{
color:#fff;
}

Это не повлияет на текст выбора файла, который все еще будет черным из-за браузера.

Keleko
источник

1

Если пользователь щелкнет эту часть, откроется всплывающее окно загрузки.

Правин

3

Это работает для меня:

input[type="file"]  {
    color: white!important;
}

новичок
источник

2

Мое решение состоит в том, чтобы просто установить его в div, как сказал «druveen», однако я добавил свой собственный стиль кнопок в div (чтобы он выглядел как кнопка с: hover), и я просто установил стиль «opacity: 0;» на вход. Создает для меня очарование, надеюсь, что то же самое для вас.

ThomasG
источник

2

Я только что ввел входной файл с шириной: 85px, и текстовое поле вообще исчезло

источник

Так текстовое поле исчезло или нет? «вообще» может означать отрицание, но ваша грамматика ошибочна (и, следовательно, неоднозначна).

Кирк Волл

2

Этот HTML-код отображается только кнопка Загрузить файл

<form action="/action_page.php">
    <input type="button" id="id" value="Upload File"  onclick="document.getElementById('file').click();" />
    <input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>  
</form>

Анил Шетти
источник

1

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

Клийстерс

1

<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo"> 

$("#logo").css('opacity','0');

$("#select_logo").click(function(){
   $().trigger('click');
   return false;
});

Сомванг Соуксаватд
источник

1

Для меня самый простой способ - использовать цвет шрифта, такой как цвет фона. Простой, не элегантный, но полезный.

<div style="color:#FFFFFF">   <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>

источник

1

Итак, вот лучший способ сделать это для всех браузеров:

Забудь CSS!

<p>Append Image:</p> 
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>

<script>
$('#images').hide();        
$('#clickImage').click( function() {    
    $('#images').trigger('click');  
});
</script>

user1965301
источник

ЭТО НЕ БУДЕТ РАБОТАТЬ В SAFARI ... так как он не позволяет .trigger ('click') по соображениям безопасности:? чтобы он работал в Safari динамически, создайте кнопку «Файл» и добавьте ее снова, когда она снова загрузится

user1965301 27.02.13

1

Все эти ответы симпатичны, но CSS не сработает, поскольку он не одинаков для всех браузеров и устройств, первый написанный мной ответ будет работать во всем, кроме Safari. Чтобы он работал во всех браузерах постоянно, его нужно динамически создавать и создавать заново каждый раз, когда вы хотите очистить вводимый текст:

    var imageDiv = document.createElement("div");   
    imageDiv.setAttribute("id", "imagediv");
    imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';  
    var imageText = document.createTextNode("Append Image:");
    var newLine = document.createElement("br"); 
    var image = document.createElement("input");    
    image.setAttribute("type", "file");
    image.setAttribute("id", "images");
    image.setAttribute("name", "images[]");     
    image.setAttribute("multiple", "multiple");
    imageDiv.appendChild(imageText); 
    imageDiv.appendChild(newLine); 
    imageDiv.appendChild(image); 
    questionParagraph.appendChild(imageDiv);

user1965301
источник

1

Ответ tmanthey довольно хороший, за исключением того, что вы не можете играть с border-width в Firefox v20. Если вы видите ссылку (демо, не могу показать здесь), они решили проблему, используя font-size = 23px, transform: translate (-300px, 0px) scale (4) для Firefox, чтобы увеличить кнопку.

Другие решения, использующие .click () в другом div, бесполезны, если вы хотите сделать это полем ввода drag'n'drop.

Балинт Каракай
источник

1

Здесь есть несколько действительных вариантов, но я подумал, что смогу дать то, что придумал, пытаясь исправить подобную проблему. http://jsfiddle.net/5RyrG/1/

<span class="btn fileinput-button">
    <span>Import Field(s)</span>
    <input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>

function handleFiles(files){
    $('#txt').text(files[0].name);  
}

Мэтью Пауцке
источник

1

Решено с помощью следующего кода:

<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>

druveen
источник

1

Я написал это:

<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>

    <div style="width: 0; height: 0; overflow: hidden;">
        <input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
    </div>
    
</form>

<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />

Развернуть фрагмент

Отлично работает во всех браузерах, без jQuery, без CSS.

MadMaxIII
источник

1

Вот упрощенная версия популярного решения @ ampersandre, которое работает во всех основных браузерах. Asp.NET разметка

<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
    style="float:left; display:inline; margin-right:5px; width:300px"
    ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
    <div id="UploadFile" style="height:38px; font-size:16px; 
      text-align:center">Upload File</div>
    <div>
      <input name="FileUpload" id="FileInput" runat="server" 
             type="File" />
    </div>
  </div>
  <asp:Button ID="UploadButton" runat="server" 
    style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />

Код JQuery

$(document).ready(function () {

   $('#UploadFile').click(function () {
       alert('UploadFile clicked');
       $('[id$="FileInput"]').trigger('click');
   });

   $('[id$="FileInput"]').change(function (event) {
       var target = event.target;
       var tmpFile = target.files[0].name;
       alert('FileInput changed:' + tmpFile);
       if (tmpFile.length > 0) {
          $('#hdnFileName').val(tmpFile);
       }
       $('[id$="UploadButton"]').trigger('click');
   });
});

код CSS

.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
 a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}

Использует скрытый триггер щелчка «UploadButton» для обратной передачи со стандартным сервером. Текст с «Upload File» выталкивает элемент управления вводом из поля обертки, когда он переполняется, поэтому нет необходимости применять какие-либо стили для элемента управления «file input». Селектор $ ([id $ = "FileInput"]) разрешает раздел идентификаторов со стандартными префиксами ASP.NET. Значение текстового поля FilePath устанавливается из кода сервера после hdnFileName.Value после загрузки файла.

Дэн Рэндольф
источник

тип ввода = кнопка показа файла

Ответы: