Question

I am using OpenLayers and jQuery Mobile and trying to upload an image to the server and see a preview without page refresh.
I have this code in place:

Markup:

<form id="imageform" method="post" enctype="multipart/form-data" action='image.php'>
  <input type="hidden" id="fid" name="fid">
  <input type="file" accept="image/*;capture=camera" name="imagechooser" id="imagechooser">           </form>
<div id="imagepreview"></div>   

JavaScript:

$('#imagechooser').on('change', function(event){        
    $("#imagepreview").html('');
    $("#imagepreview").html('<img src="loader.gif" alt="Uploading...."/>');
    $("#imageform").ajaxForm({          
        target: '#imagepreview'
    }).submit();
});

Everything is working fine, file is uploaded and target is showing the image except that the browser changes to the page: www.mypage.com/image.php and there the page is empty with one word: “undefined”, to see the target with the image I need to press the back button on the browser.

Is there any way I can prevent the browser from changing and showing that page?

Thanks.

Answer 1

You are submitting form through browser default submittal not ajax. This is causing the form action page to open. If you want ajax submittal use ajaxSubmit() method