Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov
Замена стандартного input type="file"
1. Решение на чистом CSS без JavaScript

Исходный код этого примера:
<style>
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file">
<div class="fakefile">
<input>
<img src="button_select.gif">
</div>
</div>
2. Универсальное решение на JavaScript
Функция автоматичски проходит по всем input type="file" и заменяет стандартную кнопку выбора файла на картинку search.gif.
var W3CDOM = (document.createElement && document.getElementsByTagName);
function initFileUploads() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');
image.src='button_select.gif';
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
//if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}
Оригинал - https://www.quirksmode.org/dom/inputfile.html
.
Прокомментировать/Отблагодарить