Answer was stolen from here: Can i preview the image file who uploaded by user in the browser?
- Use the
HTML5 File Api
to load the image client side. - Then use jCrop at the after loading the image into a tag.
- Then (I'm assuming) use jCrops
onRelease
method to do the Ajax call. - That way its only one ajax call, and its already modified
<img id="preview" src="placeholder.png" height="100px" width="100px" />
<input type="file" name="image" onchange="previewImage(this)" accept="image/*"/>
<script type="text/javascript">
function previewImage(input) {
var preview = document.getElementById('preview');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
preview.setAttribute('src', e.target.result);
$('#preview').Jcrop({
onRelease: yourAjaxFunctionToSubmitToServer
});
}
reader.readAsDataURL(input.files[0]);
} else {
preview.setAttribute('src', 'placeholder.png');
}
}
</script>
Obviously this will need to be modified a bit to suit your needs, but you get the idea.