Cross Browser issue for ajax file upload

Cross Browser issue for ajax file upload

Here is my jquery method:
function upload_profile_picture() {
$('#profile_image_upload').click();
var fileInput = $('#profile_image_upload');
var fileData = fileInput.prop("files")[0];
var formData = new window.FormData();
formData.append("file", fileData);
var imagePath = '';
$.ajax({
url: '/ImageHandler.ashx',
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function (data) {
var obj = $.parseJSON(data);
if (obj.StatusCode == "OK") {
imagePath = obj.Path;
log(imagePath);
$('#profile_image').attr('src', '/img/profile/' + imagePath);
} else if (obj.StatusCode == "ERROR") {
log("Unsuccesful profile picture upload. Message: " +
obj.Message);
}
},
error: function (errorData) {
log("Unsuccesful profile picture upload. " + errorData);
}
});
}
When user clicks on an image, I'm calling the javascript function above.
But it behaves different in Internet Explorer and Chrome (latest
versions). In Internet Explorer when the following line executed:
$('#profile_image_upload').click();
the following hidden input opens the dialog to choose the file to upload.
<input id="profile_image_upload" class="hidden" type="file">
and the rest of the function is not being executed until user selects a
file or cancels the dialog.
Inversely in chrome, I see that the lines after the first one are being
executed before users selects the file.
What do I have to do to fix this?
Thanks in advance,