Есть ли способ, позволяющий пользователю просматривать изображение, которое он собирается загрузить на стороне клиента, перед загрузкой на сервер?

Question

Когда пользователь загружает изображение, есть ли способ, которым я могу загрузить клиентскую часть изображения и показать его сначала, прежде чем загружать его на сервер? Предпочтительно использовать только javascript / jquery, но использование flash также приемлемо.

Answer 1

Это возможно с новым интерфейсом FileReader, определенным в HTML5 и в настоящее время работающим в Firefox.

Ввод файла связан со свойством files, которое отслеживает список файлов, выбранных в данный момент для этого ввода. Чтобы отобразить файл из этого списка, создайте новый объект FileReader, инициализируйте его обработчик события onload и прочитайте файл как URL-адрес данных.

// get the first file, foo is a file input field
var file = document.getElementById('foo').files[0];

// setup the reader and the load complete callback
var reader = new FileReader();
reader.onload = function(e) {
    var image = new Image();
    // string representing the image
    image.src = e.target.result;
    document.body.appendChild(image);
};

// read the file as a data url
reader.readAsDataURL(file);

После загрузки файла вы получите доступ к его содержимому в схеме URL-адресов, например:

data:image/jpeg;base64,...aqHI7sNyPGFjdtQvFr/2Q==

Создайте новое изображение и установите его атрибут src для этой строки данных.

См. Рабочий пример здесь . Только Firefox .

Answer 2

Начиная с HTML 5, такие вещи возможны благодаря Файловому объекту , File Reader и свойству «file» элемента input.

Смотрите здесь для получения дополнительной информации: http://demos.hacks.mozilla.org/openweb/ & http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/.

Пример (только для демонстрации, требуется FF 3.5+): Смотрите здесь: http://gist.github.com/536024

Если вам интересно, File.url совершенно новый, с ним вам больше не нужно считывать весь файл в память и назначать весь DataUrl (data: image / src, base64; DF15EDFE86 ..) свойство src.

Answer 3

Вы действительно не можете сделать этот кросс-браузер только в JavaScript из-за существующих ограничений безопасности, хотя есть несколько версий флеш-памяти, вот один пример (бесплатная версия делает то, что вы ' после).

Вероятно, есть и другие бесплатные флеш-версии.

Answer 4

Ну, тегу <img> нужен путь к изображению.Этот путь может быть к чему-то в сети, или к локальному файлу.Все идет нормально.Хитрость заключается в том, как указать в javascript путь в локальной системе, чтобы он мог установить атрибут IMG SRC.

Путь тега file <input> недоступен для JavaScript (в качестве меры безопасности--- вы не хотите, чтобы страница загружала файлы из вашей системы за вашей спиной).

С другой стороны, если вы сможете заставить своих пользователей вводить правильный путь к файлу в текст <input> поле, тогда это должно быть возможно.