Ajax image upload

If the file input is being handled separately than the form (with an AJAX call) and shouldn't be part of the form, move it outside of the form tag. This will likely affect your page layout, so you may want to make some style changes. But think of it from the perspective of just looking at the HTML markup. Elements which aren't part of parent elements shouldn't be nested within those parent elements.

You can bind to the submit event for the form and clear the value of the file input so that it is blank when the form submits:

$('#your-form-id').on('submit', function () { $('#your-file-input').val(''); return true; }); 

You can also move the file input outside the rest of the form, so there will be two form tags but you can use position : absolute; to position the file input to appear as though it is inside the other form.

I think you have to submit the form using javascript in onchange event

In your HTML, form action should be empty:

<form action=""> 

In JS code use:

$('#submut').click(function(){ var //get var by jQuery }); //Your $ajax code here...