У меня есть следующий HTML-код для загрузки изображения:
<input type="file" name="before" size="40"> <input type="hidden" name="MAX_FILE_SIZE" value="10000000"> и я хочу показать изображение, которое пользователь загружает, прежде чем он будет фактически обработан в бэкэнд. Как мне это сделать?
В основном, что я хочу сделать, это загрузить изображение с изображения на свой компьютер и показать его, чтобы его можно обрезать с помощью jCrop, а затем обработать изображение в бэкэнд
Вам нужен API-интерфейс HTML5 . Взгляните на readAsDataURL .
В принципе, вам нужно поймать событие onchange на вашем input[type="file"] и загрузить связанный файл с FileReader , а затем сохранить содержимое изображения в <img href="data" /> . Более ясная информация здесь .
Я не думаю, что вы собираетесь обойтись без какой-либо обработки на сервере, так как вы не сможете увидеть файл, который вы загружаете, пока не представите. Вы можете попробовать что-то сделать через Ajax. Я наткнулся на плагин jQuery Form и пример загрузки файлов .
Скопируйте и вставьте с сайта:
Поскольку загрузка файлов с помощью объекта XMLHttpRequest браузера невозможна, в плагине форм используется скрытый элемент iframe для помощи в задаче. Это обычная техника, но она имеет присущие ей ограничения. Элемент iframe используется как цель операции отправки формы, что означает, что ответ сервера записывается в iframe. Это нормально, если тип ответа – HTML или XML, но не работает, если тип ответа – это скрипт или JSON, оба из которых часто содержат символы, которые должны быть представлены с использованием ссылок на объекты, если они найдены в разметке HTML.
Чтобы учесть проблемы, связанные с ответами на сценарий и JSON, плагин форм позволяет вставлять эти ответы в элемент textarea, и рекомендуется, чтобы вы делали это для этих типов ответов при использовании в сочетании с загрузкой файлов. Обратите внимание, однако, что если в форме нет ввода файла, тогда запрос использует обычный XHR для отправки формы (а не iframe). Это ставит бремя на ваш код сервера, чтобы знать, когда использовать текстовое поле, а когда нет. Если вам нравится, вы можете использовать опцию iframe плагина, чтобы заставить его всегда использовать режим iframe, а затем ваш сервер всегда может вставлять ответ в текстовое поле.