How to prevent page redirection/refresh after form submit, while preserving file input? Jquery

Question

I have a file upload form as follows:

<form id="upload" action="someurl" method="post" enctype="multipart/form-data">
  <label for="file">Filename:</label>
  <input type="file" name="file" /> 
  <input type="submit" value="submit" />
<form>

Problem is that every time I submit the form I will be redirected to the form's action url.

How do I submit this form while still staying on the same page? Using ajax or preventDefault won't work as I will lose the file stream.

Rendy

Answer 1

Provided you have an iframe on your page that's hidden,

<iframe id="hidden-iframe"></iframe>

then add a target to your form:

<form id="upload" action="someurl" method="post" target="hidden-iframe" enctype="multipart/form-data">
  <label for="file">Filename:</label>
  <input type="file" name="file" /> 
  <input type="submit" value="submit" />
<form>

you're done !