Considering the overwhelming response I had to this question I thought I'd share what was going wrong!
I was initializing jcrop
on the image tag before I had an image in there. I moved the jcrop
part of my script to the ajax response as follows:
function uploadFile() {
var file = _("file1").files[0];
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "php_parsers/file_upload_parser.php");
ajax.send(formdata);
}
function completeHandler(e) {
var fileDest = e.target.responseText; //file location is responseText
_("uloadedImg").src=fileDest; // '_' is getelementbyid function
jQuery(function($) {
$('#uloadedImg').Jcrop();
});
$('#sesame').bPopup();
}
Thank you for all your help everyone!