Можно ли отобразить миниатюру изображения, не загружая его на сервер? - PullRequest
Новая
       9

Можно ли отобразить миниатюру изображения, не загружая его на сервер?

3 голосов
/ 11 июля 2010

Я хочу позволить пользователю загружать изображения на сервер, добавлять некоторую информацию (например, описание, теги) о каждом изображении.Я использую Uploadify для загрузки нескольких изображений.

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

Я хочу, чтобы пользователь имел следующий опыт:

  • Выбор нескольких файлов изображений
  • Сразу после этого введите дополнительную информацию о каждом изображении при просмотре миниатюр изображений
  • Нажмите кнопку Upload Files, чтобы загрузить изображения на сервер и пойти выпить кофе ...

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

Буду признателен за любую помощь!

Ответы [ 5 ]

4 голосов
/ 11 июля 2010

Если вы можете использовать браузер с поддержкой HTML 5, вы можете использовать файл-api

Пример: http://html5demos.com/file-api

3 голосов
/ 11 июля 2010

Конечно, это возможно.Используйте объект FileReader для получения URL-адреса данных (или используйте File.url, если вы уверены, что Клиент реализует его.) И присвойте его объекту new Image().Затем вы можете вставить изображение в DOM.

1 голос
/ 11 июля 2010

В качестве альтернативы стандартным API-интерфейсам HTML5 вы можете использовать плагин, например Flash или Browserplus .

На самом деле существует готовое приложение, которое может делать именно то, чтоты хочешь.Это называется Plupload .Вы можете загружать свои файлы / изображения, используя различные «среды выполнения», и выполнять изменение размера изображения на стороне клиента перед загрузкой.Я предполагаю, что вы можете подключить предварительный просмотр эскизов где-то там, в определенные среды выполнения.

В противном случае, вы можете попробовать создать то, что вы хотите с нуля, используя HTML5 / Gears / BrowserPlus / и т. Д.API-интерфейсы.

0 голосов
/ 27 января 2016

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

$("body").on('change', 'input:file', function(e){
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        img.width = "50";
        reader.readAsDataURL(file);
        if($(this).next().hasClass('image_place')){
          $(this).next('.image_place').html('').append(img);
        }else {
          $(this).after('<div class="image_place"></div>');
          $(this).next('.image_place').append(img);
        }
    }
});

Он сканирует все входные данные файла в теле документа и считывает изображение с помощью API FileReader.Если он находит какие-либо изображения, он создает div, называемый image_place, куда он помещает изображение.Если изображение уже есть, скрипт заменяет изображение.

0 голосов
/ 11 июля 2010

Я почти уверен, что flash и java могут это сделать. Flash потребует определенных (очевидных) мер безопасности (т. Е. Вы можете сделать это для любого файла, он должен быть выбран пользователем). В то же время Java будет показывать всплывающее окно безопасности.

...