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

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

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

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

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

Источник

3 ответа

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

Что вам нужно, это HTML5 File API. Посмотрите на 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, и тогда ваш сервер всегда может встроить ответ в текстовую область.

Источник
Другие вопросы по тегам