Как создать пользовательскую загрузку файлов только с помощью HTML, JS и CSS

Вот конструкция элемента управления, который я хочу создать:

Как вы можете видеть, легко создать дизайн, кроме кнопки просмотра элемента управления загрузкой. Я создал все остальное. Я искал изменение места кнопки "Обзор", но не нашел ничего полезного.

Итак, как это сделать? Была идея, как встраивание невидимой кнопки управления загрузкой, но любой другой совет - золотой, спасибо.

Ответ 1

На самом деле это не так сложно, как вы думаете. Проверьте эту скрипту. Стилируйте свою кнопку, как вы будете!

HTML

<input type="file" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />

CSS

input[type=file] { 
    width: 1px; 
    visibility: hidden;
}

JavaScript

$(function(){
    $('#clickme').click(function(){
        $('#uploadme').click();
    });
});

Ответ 2

Вот две отличные статьи, в которых показано, как настроить внешний вид входных файлов.

jQuery Пользовательский вход для загрузки файлов: из книги "Проектирование с прогрессивным улучшением"

Вставка файлов стилей с CSS и DOM by Shaun Inman

Ответ 3

другой пример:

см. это Fiddle

HTML:

<div class="button-green"><input class="file-upload" type="file">Upload File</div>

CSS

.button-green
{
    font-family: "Segoe UI","Segoe","Verdana";
    background: #0f9e0a center top no-repeat;
    background-image: linear-gradient(rgb(15, 158, 10), rgb(24, 105, 21)); 
    overflow: hidden;
    color: white;
    border-radius: 5px;
    width: 82px;  
    position: relative; 
    padding: 8px 10px 8px 10px;
}

.button-green:hover
{
    background: #0a8406 center top no-repeat;
    background-image: linear-gradient(rgb(12, 141, 8), rgb(19, 88, 17));     
}

.file-upload
{
    opacity: 0;
    width: 102px;
    height: 35px;
    position: absolute;
    top: 0px;
    left: 0px;
}

Ответ 4

Для решения, которое не требует JavaScript, вы можете использовать <label>:

<label for="upload">Upload</label>
<input type="file" id="upload" style="position:absolute; visibility:hidden"/>

Это не будет работать в каждом браузере: более старые и мобильные Safari. Чтобы их охватить, используйте вышеупомянутое решение JavaScript.