показ изображения, загруженного из файла перед загрузкой / POST

У меня есть следующий HTML-код для загрузки изображения:

<input type="file" name="before" size="40"> <input type="hidden" name="MAX_FILE_SIZE" value="10000000"> 

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

В основном, что я хочу сделать, это загрузить изображение с изображения на свой компьютер и показать его, чтобы его можно обрезать с помощью jCrop, а затем обработать изображение в бэкэнд

    • Сохраните файл в ответ, как обычно
    • Во время обратной передачи
      • Добавить ссылку на изображение на странице
      • Добавьте javascript в 'onload', который вызывает другую страницу для обработки обработки изображения

    Вам нужен 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, а затем ваш сервер всегда может вставлять ответ в текстовое поле.