В современном CSS input type file плохо поддаётся стилизации. К тому же он выглядит совершенно по-разному в разных браузерах. Чтобы он не выбивался из общего стиля страницы, можно сделать следующее.
Создадим красивую стилизованную кнопку:
1 2 3 |
<button class="btn" id="loadButton"> Загрузка файла </button> |
Теперь создадим input type file, но сделаем его полностью скрытым внутри div-а с высотой в 0 пикселей:
1 2 3 4 5 6 7 8 |
<form id="loadForm" method='post' action="${pageContext.request.contextPath}/user/upload" modelAttribute="data" enctype='multipart/form-data'> <div style="overflow: hidden;height : 0px;"> <input type="file" id="theFile" name="file" style="hidden: true;" onchange="$('#loadForm').submit()"/> </div> </form> |
Обратите внимание на обработчик onchange. При смене выбранного файла форма с файлом сразу же отправляется на сервер.
Повесим обработчик клика на нашу стилизованную кнопку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function loadButtonClicked() { performClick('theFile'); } $("#loadButton").click(loadButtonClicked); // Формирование события клика на элементе. function performClick(elemId) { var elem = document.getElementById(elemId); if (elem && document.createEvent) { var evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, false); elem.dispatchEvent(evt); } } |
Вот и всё. Можно было ещё сделать так, чтобы div закрывал input type не полностью. Плюс сделать input type file прозрачным и с большими значениями ширины, высоты и padding-ов, чтобы ничего от надписи и кнопки не вылазило внутри div. И позади него расположить ещё один div, в котором отображать имя выбранного файла. То есть в этом случае примерно так было бы:
1 2 3 4 5 |
<div class="file_upload"> <button id="formBrowse" class="form_browse" type="button"></button> <div id = "fileNameDiv" class="form_opfld"><?php if ($fileName== '') print 'Файл не выбран'; else print $fileName; ?></div> <input id = "userFileField" name = "userFile" type="file" /> </div> |
И CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.file_upload { position : relative; overflow : hidden; padding: 8px 0px; } .file_upload > button, .file_upload > button { float: right; margin-right:25px; } .file_upload > div, .file_upload > div { display : inline-block; width: 660px; padding-left: 1em; background-color : #e4e4e0; overflow : hidden; } .file_upload input[type=file], .file_upload input[type=file] { position: absolute; left: 0; top: 0; width: 663px; height: 999px; //transform: scale(20); letter-spacing: 10em; /* IE 9 fix */ //-ms-transform: scale(20); /* IE 9 fix */ opacity: 0; cursor: pointer; overflow : hidden; //visibility : hidden; } .form_browse { width: 32px; float : left; } |
Тут, конечно, могут потребоваться доработки. Но смысл такой, примерно.
Ссылки:
Пример стилизации input type file — пример стилизации
По-разному, пишется через дефис. Исправьте.
Спасибо. Исправил.