How to submit form on file select without page reload?

Question

I'm developing an wireless file transfer app (HTTP Web Server), it contains a website with a form to upload file to the server i.e android app

When I select a file of very less size header generated is as below.

            POST /?Upload HTTP/1.1
            Host: 192.168.0.101:4567
            Connection: keep-alive
            Content-Length: 2968
            Pragma: no-cache
            Cache-Control: no-cache
            Origin: http://192.168.0.101:4567
            User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
            Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryT0t2jgS72DnsVZRX
            Accept: */*
            DNT: 1
            Referer: http://192.168.0.101:4567/
            Accept-Encoding: gzip, deflate
            Accept-Language: en-US,en;q=0.8

And when I select a larger file then and error occurs as follow

Console error : (index):637 Refused to set unsafe header "Content-length"

Header generated

            Provisional headers are shown
            Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
            Origin:http://192.168.0.101:4567
            Referer:http://192.168.0.101:4567/
            User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

            Provisional headers are shown
            Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
            Origin:http://192.168.0.101:4567
            Referer:http://192.168.0.101:4567/
            User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

            Provisional headers are shown
            Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
            Origin:http://192.168.0.101:4567
            Referer:http://192.168.0.101:4567/
            User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

Code :

            <form id="uploadForm" method="post" enctype="multipart/form-data">
                <input id="uploadPath" type="hidden" name="path">
                <button class="file-upload">
                    <input id="fileUpload" onchange="uploadFile()" type="file" class="file-input">Upload
                </button>
            </form>

            <script>

            function uploadFile() {        
                var form = document.getElementById('uploadForm');
                var path = form.elements.namedItem("path").value
                var file = document.getElementById('fileUpload').files[0];
                var formData = new FormData(form);

                formData.append('file', file);
                var http = new XMLHttpRequest();
                http.open("POST", '/?Upload', true);
                http.setRequestHeader("Content-length", file.size);
                http.onreadystatechange = function () { //Call a function when the state changes.
                    if (http.readyState == 4 && http.status == 200) {
                        alert(http.responseText);
                    }
                }

                http.send(formData);
                form.reset();
                form.elements.namedItem("path").value = path;

            }
            </script>

is "upload" a valid URL with your routing? Also, please post any errors you get in the javascript console or on the actual request itself. "Not working" is not really helpful — mhodges, Mar 25 '16 at 15:52
(index):628 Uncaught ReferenceError: $ is not defined.. here $("#fileUpload").on("change", function () { error — Bhavesh Patel, Mar 25 '16 at 15:55
If you're getting that error, that means you haven't included jQuery in your page. Search for "getting started with jQuery" — Mike Cluck, Mar 25 '16 at 16:38
I have updated my answer to include the reference to the jQuery library, and also to place the event handler inside of the document ready function. — mhodges, Mar 25 '16 at 17:24

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

This will listen to the file input, and when the value changes, meaning they have selected a file, it will send an ajax call with your form to the url you specify. This should submit the form without a page reload.

Updated to include reference to jQuery

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script>
$(function () {
  $("#fileUpload").on("change", function () {
    $.ajax({
      url: "upload.php",
      method: "POST",
      data: $("form").serialize(),
      success: function (data) {
        // success callback
      }
    });
  });
});
</script>

score 0 · Answer 2 · answered Mar 25 '16 at 15:24

0

You should probably try looking into AJAX. This will make it possible to update part of your page without a reload, by requesting page fragments from the webserver. The page fragments are then used to update certain elements on your page. See http://www.w3schools.com/ajax for an intro.

answered Mar 25 '16 at 15:24

Dandorid

205
2
12

This is not an answer, it is a comment. – mhodges Mar 25 '16 at 15:25

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

You could check out this solution (jQuery AJAX submit form). Requires JQuery but is easy to implement.

You could try only using Javascript and AJAX (Form submission using AJAX, PHP and Javascript), without the need to be dependent on JQuery. This would be a more complex process to build, however it is the best method if you plan on building out more complex form submission features.

edited May 23 '17 at 12:31

Community

1
1

answered Mar 25 '16 at 15:41

Isaac Dozier

86
1
3

How to submit form on file select without page reload?

3 Answers3

Updated to include reference to jQuery

Linked