Uploading file in a form without page refresh

Question

I have this bit of code:

<form name="myUploadForm" method="post" action="/scripts/upload.do" enctype="multipart/form-data" id="fileUpload">
   <table width="100%" border="0"> 
      <tr>
         <td>
            <input type="file" name="xlsFile" size="60" value="test.xls"> 
            <input type="button" value="Upload File" name="upload_xls">
         </td>
      </tr>
   </table>
</form>

Right now I can upload the file with Struts but it refreshes the page. How do I do this without the page refreshing?

possible dupe [ajax - How can I upload files asynchronously with JQuery? - Stack Overflow](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) — MikeM, Apr 12 '11 at 16:32

score 7 · Answer 1 · answered Dec 09 '13 at 18:38

7

What worked for me:

On the form tag, I have target="hidden-iframe"

the hidden i-frame on the page looks like this:

<iframe name="hidden-iframe" style="display: none;"></iframe>

The important thing to underline here is that the form is referencing the name attribute of the frame and not the id.

answered Dec 09 '13 at 18:38

justian17

575
1
7
17

http://viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/ – FlorianB Aug 15 '16 at 14:43
@FlorianB that blog is dated 2008. (And, I know, your comment is dated 2016!) – lurker Apr 15 '19 at 18:01

score 5 · Answer 2 · answered Apr 23 '17 at 09:19

You can post form with jQuery and get the result back.

$('#formId' ).submit(
    function( e ) {
        $.ajax( {
            url: '/upload',
            type: 'POST',
            data: new FormData( this ),
            processData: false,
            contentType: false,
            success: function(result){
                console.log(result);
                //$("#div1").html(str);
            }
        } );
        e.preventDefault();
    } 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formId" action="/upload" enctype="multipart/form-data" method="post">
        <input type="text" name="title"><br>
        <input type="file" name="upload" multiple="multiple"><br>
        <input type="submit" value="Upload">
</form>
<div id="div1">
</div>

score 1 · Answer 3 · edited Aug 11 '13 at 11:20

1

There are two methods:

HTML5 supports File API.
Create a hidden iframe, point the property 'target' of the form to the iframe's id.

edited Aug 11 '13 at 11:20

Shadow The GPT Wizard

66,030
26
140
208

answered Aug 11 '13 at 09:52

HaleDeng

31
4

Town · Answer 4 · 2022-12-01T16:01:07.847

0

If you can use jQuery, you can use something like jQuery File Upload.

edited Dec 01 '22 at 16:01

answered Apr 12 '11 at 16:27

Town

14,706
3
48
72

#Town. I get an error when I am visiting that page. – mightycode Newton Nov 17 '22 at 08:34
Thanks @mightycodeNewton, I've updated it to a working link, although I can't vouch for whether the plugin itself still works, last update appears to have been 2014. – Town Dec 01 '22 at 16:02

Uploading file in a form without page refresh

4 Answers4

Linked