Uploading file in a form without page refresh

Question

I have this bit of code:

Answer 1

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.

Answer 2

There are two methods:

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

Answer 3

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>

Answer 4

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