Можно ли стиль элемента ввода файла типа не беспокоиться о совместимости браузера? В моем случае мне нужно реализовать фоновое изображение и круглую границу (1px), кнопка также должна быть настроена, если это возможно.
Стиль ввода типа файла?
Ответ 1
Выполните следующие действия, затем вы можете создать пользовательские стили для своей формы загрузки файла:
1.) Это простая форма HTML (пожалуйста, прочитайте комментарии HTML, которые я написал здесь ниже)
<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;" onclick="getFile()">Click to upload!</div>
<!-- this is your file input tag, so i hide it!-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<input type="submit" value='submit' >
</form>
2.) Затем используйте этот простой script, чтобы передать тег ввода события в файл.
function getFile(){
document.getElementById("upfile").click();
}
Теперь вы можете использовать любой тип стиля, не беспокоясь о том, как изменять стили по умолчанию. Я знаю это очень хорошо, потому что я пытаюсь изменить стили по умолчанию за полтора месяца. поверьте мне это очень сложно, потому что у разных браузеров есть разные теги ввода загрузки. Поэтому используйте этот способ для создания пользовательских форм для загрузки файлов. Вот полный код АВТОМАТИЗИРОВАННОГО ЗАГРУЗКИ.
<html>
<style>
#yourBtn{
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor:pointer;
}
</style>
<script type="text/javascript">
function getFile(){
document.getElementById("upfile").click();
}
function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
document.myForm.submit();
event.preventDefault();
}
</script>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px; width: 0px;overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>
Ответ 2
То же решение через JQuery. Работает, если на странице имеется несколько файлов.
$j(".filebutton").click(function() {
var input = $j(this).next().find('input');
input.click();
});
$j(".fileinput").change(function(){
var file = $j(this).val();
var fileName = file.split("\\");
var pai =$j(this).parent().parent().prev();
pai.html(fileName[fileName.length-1]);
event.preventDefault();
});
Ответ 3
Оглядываясь на Google в течение длительного времени, опробовав несколько решений, как CSS, JavaScript, так и JQuery, я обнаружил, что большинство из них использовали кнопку "Изображение" в качестве кнопки. Некоторые из них были сложны в использовании, но мне удалось собрать что-то, что закончилось для меня.
Важными для меня были:
- Кнопка "Обзор" должна была быть кнопкой (а не изображением).
- Кнопка должна иметь эффект наведения (чтобы она выглядела хорошо).
- Ширину текста и кнопки нужно было легко настроить.
- Решение должно было работать в IE8, FF, Chrome и Safari.
Это решение, с которым я столкнулся. И надеюсь, что это может быть полезно и для других.
Измените ширину .file_input_textbox, чтобы изменить ширину текстового поля.
Измените ширину и .file_input_div,.file_input_button и .file_input_button_hover, чтобы изменить ширину кнопки. Возможно, вам придется немного подкорректировать позиции. Я никогда не понимал, почему...
Чтобы протестировать это решение, создайте новый html файл и вставьте его в него.
<html>
<head>
<style type="text/css">
.file_input_textbox {height:25px;width:200px;float:left; }
.file_input_div {position: relative;width:80px;height:26px;overflow: hidden; }
.file_input_button {width: 80px;position:absolute;top:0px;
border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px;
border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer;
opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; }
</style>
</head>
<body>
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input id="fileInputButton" type="button" value="Browse" class="file_input_button" />
<input type="file" class="file_input_hidden"
onchange="javascript: document.getElementById('fileName').value = this.value"
onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';"
onmouseout="document.getElementById('fileInputButton').className='file_input_button';" />
</div>
</body>
</html>
Ответ 4
Здесь простое решение css, которое создает согласованную целевую область и позволяет вам стилизовать ваши faux-элементы, как вам нравится.
Основная идея такова:
- У вас есть два "поддельных" элемента (текстовый ввод/ссылка) в качестве сиблингов для вашего реального входа в файл. Абсолютно позиционируйте их так, чтобы они точно соответствовали вашей целевой области.
- Оберните свой файл с помощью div. Установите переполнение в скрытое (так что входной файл не выйдет) и сделайте его точно таким, каким вы хотите, чтобы ваша целевая область была.
- Установите непрозрачность 0 на вход файла, чтобы он был скрыт, но все еще доступен для клика. Дайте ему большой размер шрифта, чтобы вы могли щелкнуть все части целевой области.
Здесь jsfiddle: http://jsfiddle.net/gwwar/nFLKU/
<form>
<input id="faux" type="text" placeholder="Upload a file from your computer" />
<a href="#" id="browse">Browse </a>
<div id="wrapper">
<input id="input" size="100" type="file" />
</div>
</form>
Ответ 5
Используйте свойство clip вместе с непрозрачностью, z-index, абсолютным позиционированием и некоторыми фильтрами браузера, чтобы поместить файл на нужную кнопку:
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping
Ответ 6
используйте uniform js plugin для ввода стиля любого типа, выберите, textarea.
URL-адрес http://uniformjs.com/