Эта статья является логическим продолжением статьи «Стилизация кнопки input type file в HTML».
В той статье явно не хватало хорошего примера.
Здесь описывать особо ничего нового нет. Всё описано в той статье. Приведу сразу коды. Файл index.php:
|
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 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html> <head> <title>input type file</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <div class="container"> <div class="row"> Статья с описанием: <a href="https://urvanov.ru/2015/07/30/%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B8-input-type-file/">Пример стилизации input type file</a> </div> <?php if (isset($_FILES['userFile'])) { print '<div class="alert alert-success" role="alert">'.'Файл: "'.$_FILES['userFile']['name'].'"' .',<br /> mime-type: '.$_FILES['userFile']['type'] .',<br /> размер: '.$_FILES['userFile']['size'].' байт' .' успешно загружен на сервер.'.'</div>'; } ?> <form action="index.php" enctype="multipart/form-data" method="POST"> <div class="row"> <div class="file_upload_label">Вы можете приложить файл:</div> <input type="hidden" id="fileContentBase64Field" name="fileContentBase64" value="<?php print $fileContentBase64; ?>" /> <input type="hidden" id="fileNameField" name="fileName" value="" /> <div class="file_upload col-lg-12"> <button id="formBrowse" class="form_browse glyphicon glyphicon-folder-open btn btn-sm" type="button"></button> <div id = "fileNameDiv" class="form_opfld col-lg-11">'Файл не выбран'</div> <input id = "userFileField" name = "userFile" type="file" /> </div> <div class="form_hint">Перенесите файл в указанное поле или укажите путь к нему на диске.</div> <div class="form_hint">Вы можете переслать несколько файлов, запаковав их в единый архив.</div> </div> <div class="row"><input type="submit" class="btn-primary btn-sm"></div> </form> </div> </body> </html> |
style.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 44 45 46 47 48 49 |
.file_upload_label { margin: 8px 0px; } .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; } |
Файл script.js:
|
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 44 45 |
// $(function(){ var wrapper = $( ".file_upload" ), btn = wrapper.find( "button" ), lbl = wrapper.find( "div" ), inp = wrapper.find( "input" ); btn.focus(function(){ inp.focus() }); // Crutches for the :focus style: inp.focus(function(){ wrapper.addClass( "focus" ); }).blur(function(){ wrapper.removeClass( "focus" ); }); var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false; inp.change(function(){ var file_name; if( file_api && inp[ 0 ].files[ 0 ] ) file_name = inp[ 0 ].files[ 0 ].name; else file_name = inp.val().replace( "C:\\fakepath\\", '' ); if( ! file_name.length ) return; if( lbl.is( ":visible" ) ){ lbl.text( file_name ); }else btn.text( file_name ); }).change(); $('#formBrowse').click(browseClick); function browseClick() { $('#userFileField').click(); } }); $( window ).resize(function(){ $( ".file_upload input" ).triggerHandler( "change" ); }); |
Конечный результат:
https://urvanov.ru/projects/bootstrap-examples/3.3.5/input-type-file/