Для того, чтобы показывать миниатюры изображений, выбранных соответствующим полем формы, можно использовать возможности FileReader
, при помощи метода readAsDataURL()
кодируя изображение. Проблема в том, что процесс чтения и кодирования достаточно длителен, отчего выбор нескольких больших фотографий может привести к длительному зависанию вкладки, в которой исполняется скрипт. Пример использования этого способа в файле t0-dataURL.html
.
Гораздо быстрей будут генерироваться ссылки на файлы при помощи createObjectURL()
, который достаточно широко поддерживается. Этот способ реализован в файле t1-objectURL.html
. Сгенерированные ссылки на выбранные файлы указываются в атрибуте src
миниатюр, которые при помощи стилей уменьшаются до требуемого размера. Так