0

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

RWendi
  • 1,446
  • 5
  • 20
  • 38

1 Answers1

5

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 !

yakiang
  • 1,608
  • 1
  • 16
  • 17
  • Right - and then in the response page, you can include some JavaScript that performs appropriate updates of the parent page (that is, the page with the form) to indicate success etc. – Pointy Oct 13 '13 at 15:27
  • I tried with this solution but while request call status will come cancelled. In database record is created with empty data.any suggestions? – stefun Jan 08 '14 at 16:01
  • 2
    I had to use name="hidden-iframe" instead of id="hidden-iframe" in order to prevent a new tab from also opening. See second answer on [this question](http://stackoverflow.com/questions/5638529/uploading-file-in-a-form-without-page-refresh) – AHowgego Nov 24 '14 at 12:27