Верстка

Стилизация input type="file" с помощью CSS и JQuery и вывод аватара файла

Один из самых сложных для стилизации элементов - это поле выбора файлов, элемент input с типом file.

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

Дополнительную сложность создает то, что это поле попадает под различные правила безопасности браузеров, поэтому его нельзя, например, заменить каким-нибудь стилизованным div, нельзя обернуть тегом label, нельзя напрямую присвоить значение с помощью скриптов или вызвать окно выбора файла, сэмулировав нажатие через element.click(). А в некоторых браузерах даже нельзя сделать поле выбора файлов скрытым, так как после отправки формы его значение не будет передано на сервер. 

Простое решение этой проблемы, описано  в предыдущей статье , при котором нужный элемент помещается внутрь блока div с фиксированными размерами и фоновым изображением, а самому же элементу присваивается атрибут "прозрачный". Не скрытый, а именно полностью прозрачный. Еще немного пришлось пошаманить, чтобы в границах родительского div'а оказалась область input, отвечающая на клик мышкой и открывающая окно выбора файла. Для этого был максимально увеличен шрифт и высота самого input'а.

Но в некоторых случаях может понадобиться имя выбранного файла, например, чтобы до отправки формы мы могли выполнить предварительную проверку, если ожидается файл определенного типа. Или же, например, чтобы пользователь мог проверить, тот ли файл он загружает. В обычном поле input пользователь его и так видит, а в нашем стилизованном - нет. Для этого добавим обработчик на событие onchange, вот код:

onchange="file_selected();

И добавляем скрипт обработчик:

function file_selected() {
    try {
        var file = document.getElementById('uploaded_file').files[0];
        if (file) {
            var fileSize = 0;
            if (file.size > 1024 * 1024) {
                fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            }
            else {
                fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
            }
            document.getElementById('file_name').innerHTML = 'Name: ' + file.name;
            document.getElementById('file_size').innerHTML = 'Size: ' + fileSize;

            if (/\.(jpe?g|bmp|gif|png)$/i.test(file.name)) {
                var el=document.getElementById('preview');
                if (typeof file.getAsDataURL=='function') {
                    if (file.getAsDataURL().substr(0,11)=='data:image/') {
                        el.onload=function() {
                            document.getElementById('file_name').innerHTML+=' ('+el.naturalWidth+'x'+el.naturalHeight+' px)';
                        }
                        el.src=file.getAsDataURL();
                    }
                    else {
                        el.src='dot.gif';
                    }
                }
                else {
                    var reader = new FileReader();

                    reader.onloadend = function(evt) {
                        if (evt.target.readyState == FileReader.DONE) {
                            el.onload=function() {
                                document.getElementById('file_name').innerHTML+=' ('+el.naturalWidth+'x'+el.naturalHeight+' px)';
                            }
                            el.src = evt.target.result;
                        }
                    };

                    var blob;
                    if (file.slice) {
                        blob = file.slice(0, file.size);
                    }
                    else if (file.webkitSlice) {
                        blob = file.webkitSlice(0, file.size);
                    }
                    else if (file.mozSlice) {
                        blob = file.mozSlice(0, file.size);
                    }
                    reader.readAsDataURL(blob);
                }
            }
        }
    }
    catch(e) {
        var file = document.getElementById('uploaded_file').value;
        file = file.replace(/\\/g, "/").split('/').pop();
        document.getElementById('file_name').innerHTML = 'Name: ' + file;
    }
}
function file_upload() {
    var file = document.getElementById('uploaded_file').value;
    if (file) {
        document.getElementById('upload_form').submit();
    }
}

Добавим немного стилей:

.input_file {
    width: 210px;
    height: 70px;
    background: url('images/upload_select.png') no-repeat;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    float: left;
}
.input_file input {
    opacity: 0;
    filter: alpha(opacity:0);
    font-size: 200px;
    height: 200px;
    padding: 0;
    margin: 0 0 0 -450px;
    border: 0 none;
    cursor: pointer;
}

Ну вот и все.

Результат можно посмотреть на этой странице