VPF::Превью картинки - Форум программистов

PraporshikZadov

Дата 3.1.2013, 03:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 13.5.2012

Репутация: нет
Всего: нет

В поле формы input выбираю файл картинки. Подскажите пожалуйста как сделать превью этой картинки с помощью jQuery или просто javascript? На сервер ее грузить не надо.

skyboy

Дата 3.1.2013, 09:27 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 10
Всего: 260

FileReader — т.е. HTML5 FileApi
обрати внимание на поддержку браузерами и сделай так, чтоб в браузерах без поддержки fileApi(IE < 10) хотя бі и с загрузкой на сервер работало.

Ripper

Дата 3.1.2013, 14:32 (ссылка)

(нет голосов)

Загрузка ...

Lonely soul...

Профиль
Группа: Участник
Сообщений: 920
Регистрация: 30.6.2004
Где: г. Москва

Репутация: нет
Всего: 23

Вот пример, в хроме работает:

Код


<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Preview test</title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script>
            $(function() {
                $('#showPreview').click(function() {
                    var reader = new FileReader();
                    var image;
            
                    reader.onload = function(e) {
                        var imageSrc = e.target.result;
                        
                        $('#previewImg').attr('src', imageSrc);
                    }
                    
                    reader.readAsDataURL($('input[name="image"]').get(0).files[0]);
                });
            });
        </script>
    </head>
    <body>
        <input type="file" name="image" />
        <button id="showPreview">Show preview</button>
        <img id="previewImg" width="100" />
    </body>
</html>

--------------------

"Он знает: надо смеяться над тем, что тебя мучит, иначе не сохранишь равновесия, иначе мир сведет тебя с ума" - Над кукушкиным гнездом

PraporshikZadov

Дата 7.1.2013, 22:15 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 13.5.2012

Репутация: нет
Всего: нет

Спасибо.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »