Блог

Главная - Вопросы по программированию - Тип формата = текстовая кнопка с помощью CSS

Тип формата = текстовая кнопка с помощью CSS

#php #html #css #button #file-upload

#php #HTML #css #кнопка #загрузка файла

Вопрос:

Я использую модифицированную кнопку ввода для пользователей для загрузки файла.

Я нашел эту скрипку и использовал тот же точный код и успешно сгенерировал рабочую кнопку CSS. http://jsfiddle.net/geniuscarrier/ccsGK /

 <div class="fileUpload btn btn-primary">
    <span>Uploads</span>
    <input type="file" class="upload" />
</div>

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

Единственная проблема заключается в том, что как только я использую кнопку для загрузки файла, сообщение, которое обычно отображается справа от кнопки с именем выбранного файла, исчезает.

Следовательно, пользователь не может определить, был ли выбран файл. Есть ли способ обойти это?

Ответ №1:

Используйте js / jQuery для чтения имени загруженного файла и размещения его в виде текста внутри <span></span> (или в любом другом месте).

 $('.upload').change(function(){
    $('.fileUpload > span').text($(this).val());
});

Комментарии:

1. Извините за мое невежество, но не могли бы вы, пожалуйста, немного конкретнее рассказать о том, как это сделать? Я положил свой код в <script> tags inside the span, but it didn’t work, but I’m guessing I’m missing something.

2. @Kevin для запуска его скрипта вам необходимо включить библиотеку jquery

3. @Kevin да, вам не хватает включенного jQuery и $(document).ready(function(){/* my code */})

Ответ №2:

Это связано с opacity: 0 вашим .fileUpload input.upload правилом css. Измените его на что-то вроде 5, и вы увидите, что появится исходный файловый элемент управления. Однако при использовании управления загрузкой файлов таким образом обычно требуется метка / интервал, который должен быть заполнен выбранным файлом. Имя выбранного файла вы можете получить из JavaScript.

Ответ №3:

Я не совсем уверен, каковы ваши требования, но, похоже, вы пытаетесь изменить стиль кнопки ввода файла.

Если у вас нет требований, необходимых для поддержки старых браузеров, вы можете использовать -webkit-file-upload-button и -ms-browse properties для настройки конкретных кнопок. Это будет работать только в IE10 и выше и в современных браузерах webkit. Я изменил следующее на основе вашего css, чтобы оно работало:

 .fileUpload {
    position: relative;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
}
input.upload::-webkit-file-upload-button{
  visibility: hidden;
}

input.upload::-ms-browse{
  visibility: hidden;
}

Это позволит вам скрыть только часть кнопки, и вы можете разместить кнопку поверх существующей настроенной кнопки. Вы также можете настроить таргетинг на поле ввода напрямую, как только кнопка скрыта. Например.

 input.upload::before{
    content: 'Uploads';
    background:#00f;
    color:#fff;
}