В общем, реализуется следующим образом:
на форму помещаете:
<img id="blah" src="~/App_Img/noimg.png" alt="your image" /><br />
<input type="file" name="AddImage" id="AddImage" accept="image/*" />
Затем добавляете яваскриптовый обработчик, который при выборе файла в инпуте подставит картинку в этот верхний тег img, что-то типа такого:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
var widthImg = $('#blah').width();
console.log("widthImg = " + widthImg);
var widthContent = 342;
console.log("widthContent = " + widthContent);
//если ширина картинки больше, чем наш контент, то добавляем коеффициент сжатия
if (+widthImg > +widthContent) {
var koef = +widthImg / +widthContent;
$("#koef").val(Math.round(koef*1000));
$('#blah').attr('src', e.target.result).css('width', '100%');
}
else {
}
//addJCrop(1);
//jcrop_api.animateTo(getRandom());
}
reader.readAsDataURL(input.files[0]);
}
}
$("#AddImage").change(function () {
$('#blah').attr('src', "~/Content/nophoto.png");
readURL(this);
//$('input[type="file"]').hide();
//$('.buttonSubmitImg').show();
//CropResult.isUpload = true;
});
После этого вы проделываете какие-то операции с этим прелоадером, а результат складываете в скрытые поля на форме. Не сам результат (то, что у вас получилось с фоткой), а результат работы ваших функций. В моём случае я пользовался библиотекой jcrop, в скрытые поля я пихал x0, y0, x1, y1. На сервер передаётся в таком случае исходный не тронутый файл и координаты диагонали, по которой уже на сервере еще раз обрезается фотография и сохраняется уже изменённая.
В вашем случае нужно на яваскрипте реализовать повороты влево/вправо, на клиенте поворачивать с помощью css, а на сервер передать саму фотку и какой-нибудь rotateAngle - с помощью которого уже на сервере повернуть фотку перед сохранением.
