Есть ли способ стилизовать (или script) <input type=file /> элемент, чтобы иметь только видимую кнопку "Обзор" без текстового поля?
Спасибо
Edit: Просто уточнить, зачем мне это нужно. Я использую код загрузки нескольких файлов из http://www.morningz.com/?p=5, и ему не нужно вводить текстовое поле, потому что оно никогда не имеет значения. Script просто добавляет вновь выбранный файл в коллекцию на странице. Это выглядело бы намного лучше без текстового поля, если это возможно.
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
Это, безусловно, будет работать, я использовал его в своих проектах. Надеюсь, это поможет:)
У меня было время, пытаясь это сделать. Я не хотел использовать решение Flash, и ни одна из библиотек jQuery, на которые я смотрел, была надежной во всех браузерах.
Я придумал свое собственное решение, которое полностью реализовано в CSS (за исключением изменения стиля onclick, чтобы кнопка появилась нажатой).
Здесь вы можете попробовать рабочий пример: http://jsfiddle.net/VQJ9V/307/ (протестирован в FF 7, IE 9, Safari 5, Opera 11 и Chrome 14)
Он работает, создавая большой ввод файла (с размером шрифта: 50 пикселей), а затем обертывая его в 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)
}
Сообщите мне, есть ли какие-либо проблемы с этим, и я попытаюсь их исправить.
Я потратил свой день сегодня на то, чтобы это работало. Я не нашел ни одного из решений, которые работают в каждом из моих сценариев.
Затем я вспомнил, что видел пример для загрузки файла 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>
Скройте элемент входного файла и создайте видимую кнопку, которая вызовет событие click этого входного файла.
Попробуйте следующее:
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();}
);
});
Это будет очень сложно. Проблема с типом ввода файла состоит в том, что он обычно состоит из двух визуальных элементов, а рассматривается как один DOM-элемент. Добавьте к этому, что у нескольких браузеров есть свой собственный отличный внешний вид для ввода файла, и вы настроены на кошмар. См. Статью на quirksmode.org об ошибках ввода файла. Я гарантирую, что это не сделает вас счастливыми (я говорю по опыту).
[EDIT]
На самом деле, я думаю, вы можете уйти с помещением ввода в элемент контейнера (например, div) и добавлением отрицательного поля к элементу. Эффективно скрывать часть текстового поля с экрана. Другим вариантом было бы использовать технику в связанной статье, чтобы попытаться стилизовать ее как кнопку.
Скрыть тег входного файла с помощью css, добавить метку и назначить ее кнопке ввода. метка будет кликабельна, и при нажатии на нее откроется диалоговое окно файла.
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>
Добавьте стиль к ярлыку в качестве кнопки.
Живая демонстрация
Исправить работу во всех браузерах ПОСТАНОВИЛИ:
<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
Я использовал некоторый код, рекомендованный выше, и после многих часов ожидания моего времени я в конце концов пришел к бесплатному решению css bag.
Вы можете запустить его здесь - 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/>
Еще один простой способ сделать это. Создайте тег "тип входного файла" в 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/
Вот мое хорошее лекарство:
<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>
По крайней мере, он работал в Safari.
Обычный и простой.
Вы можете пометить изображение, поэтому, когда вы нажмете на него, будет активировано событие нажатия кнопки. Вы можете просто сделать обычную кнопку невидимой:
<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>
Он работал у меня во всех браузерах и очень прост в использовании.
Вы можете отправить событие клика по вводу скрытого файла следующим образом:
<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>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();
});
});
Надеюсь, что это работает:)
Я знаю, что это старый пост, но простой способ заставить текст исчезнуть - это просто установить цвет текста в фоновом режиме.
например, если ваш фон ввода текста белый, а затем:
input[type="file"]{
color:#fff;
}
Это не повлияет на текст "Выбрать файл", который по-прежнему будет черным из-за браузера.
Это работает для меня:
input[type="file"] {
color: white!important;
}
Мое решение состоит только в том, чтобы установить его в div как "druveen", но я объявляю свой собственный стиль кнопки для div (сделайте его похожим на кнопку с зависанием), и я просто задаю стиль "opacity: 0;" на вход. Работает для меня очарованием, надеюсь, что он сделает то же самое для вас.
Я просто написал входной файл с шириной: 85px, и текстовое поле вообще исчезло
Я попытался реализовать два лучших решения, и это оказалось для меня огромной тратой времени. В конце концов, применение этого класса .css решило проблему...
input[type='file'] {
color: transparent;
}
Готово! супер чистый и супер простой...
У меня действительно хакерское решение с этим...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />
Проблема заключается в том, что атрибут width, который скрывает текстовое поле, будет явно изменяться между браузерами, варьироваться между темами Windows XP и т.д. Может быть, с чем-то вы можете работать, хотя?...
Решено с помощью следующего кода:
<div style="overflow: hidden;width:83px;">
<input style='float:right;' name="userfile" id="userfile" type="file"/>
</div>
<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;
});
Для меня самый простой способ - использовать цвет шрифта, например, цвет фона. Простой, не элегантный, но полезный.
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>
Итак, лучший способ сделать это ДЛЯ ВСЕХ БРАУЗЕРОВ:
Забудьте 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>
Все эти ответы являются симпатичными, но 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);
Ответ tmanthey неплохой, за исключением того, что вы не можете играть с шириной границы в Firefox v20. Если вы видите ссылку (демонстрация, на самом деле не может показать здесь), они решили проблему, используя font-size = 23px, transform: translate (- 300px, 0px) (4) для Firefox, чтобы получить кнопку больше.
Другие решения, использующие .click() в другом div, бесполезны, если вы хотите сделать это поле ввода drag'n'drop.
Здесь есть несколько допустимых вариантов, но я подумал, что дам то, что я придумал, пытаясь исправить аналогичную проблему. 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);
}
Я написал это:
<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();" />Вот упрощенная версия популярного решения @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 code
.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" щелчок триггера для обратной передачи по серверу со стандартом. Текст с текстом "Загрузить файл" выталкивает элемент управления входами из представления в div обертки, когда он переполняется, поэтому нет необходимости применять какие-либо стили для элемента управления "file input". Селектор $([id $= "FileInput" ]) позволяет использовать раздел идентификаторов со стандартными префиксами ASP.NET. Значение текстового поля FilePath в наборе из кода сервера позади из файла hdnFileName.Value после загрузки файла.
В этом 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>