Загрузка изображения внутри формы, чтобы позволить пользователю обрезать перед отправкой

Question

В настоящее время у меня есть форма, которая запрашивает информацию пользователя, например, имя, фото и доб

<form action="action.php" method="post" enctype="multipart/form-data" >
    <input type="text" name="name" value="" />
    <input type="file" name="image" />
    <input type="text" name="dob" value="" />
    <input type="submit" name="submit" value="submit" />
</form>

Я бы хотел, чтобы пользователь мог загрузить, а затем обрезать изображение перед отправкой формы. Каков был бы лучший способ сделать это? Я знаю, что невозможно вложить формы. Будет ли работать следующее:

• событие на кнопке просмотра
• когда пользователь нажимает кнопку просмотра и выбирает файл, изображение загружается через ajax
• после завершения загрузки пользователю предоставляется оверлей
• пользователь может обрезать изображение - пользователь нажимает сохранить и диалоговое окно закрывается
• Размеры хранятся в скрытых полях в форме
• пользователь заполняет остальную часть формы и отправляет

Или есть лучшее решение?

Answer 1

Я думаю, что вы должны сначала сохранить образ на диск, и только тогда вы сможете его обрезать.Оформить заказ http://deepliquid.com/projects/Jcrop/demos.php.Какой язык программирования вы используете?

Это показывает реализацию php.

http://www.sanisoft.com/blog/2010/11/08/jcrop-demo-using-php/

http://www.cagintranet.com/archive/how-to-use-jcrop-from-within-an-application/

Если вы используете загрузчик ajax, возможно, страница не обновляется.При успешной загрузке будет метод обратного вызова javascript.С помощью этой функции вы можете установить изображение src, используя jquery, а затем активировать свой пользовательский интерфейс обрезки.

function AjaxUploaderSucess(){
    $("#imgBox").show()
    $("#imgBox").attr("src", uploadimageUrl); 
    $("#imgBox").Jcrop();//Enable your crop ui
}

Answer 2

Получил это, используя http://www.webtoolkit.info/ajax-file-upload.html, который я нашел через Альтернатива форме загрузки Ajax, вложенной в другую форму

Answer 3

Ваше решение звучит как наиболее логичный способ сделать это, если вы хотите, чтобы сервер выполнял обрезку.

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

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