CODEWITHSUNDEEP
phpjqueryhtmlajaxupload
arjunurs
arjunurs

Reputation: 1182

Ajax image upload

I have a form where I do a ajax image upload triggered on onChange event for the input element (file). The ajax image upload works fine but I notice that the image is uploaded again on submitting the form itself. How can I prevent the image from being uploaded again?

Upvotes: 0

Views: 718

Answers (4)

Mahmoud Ali Kassem
Mahmoud Ali Kassem

Reputation: 81

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...

Upvotes: 0

Jasper
Jasper

Reputation: 75993

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.

Upvotes: 1

Rakhitha Nimesh
Rakhitha Nimesh

Reputation: 1441

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

Upvotes: 0

David
David

Reputation: 218808

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.

Upvotes: 1

Related Questions