Send file and form via Jquery and show the result in div

Question

I have a form with a text input and a file send by the user :

<form enctype="multipart/form-data" id="sql" action="./sql_parse.php" method="post">
    <input class='form-control' name="da_text"><br>
    <input type='file' name='fileToUpload' id='fileToUpload'>
</form>

And Jquery :

$("#BTsubmit").click(function () {
    $.post("./sql_parse.php", $("#sql").serialize(), function (data) {
        $('#affiche_resultat').html(data);
    });
});

I would like to send the form text and file with Jquery, and then show the result in the division #affiche_resultat. As the file is not included in the POST request, I can't use it and PHP gives me an error.

What error? Are you checking if file is uploaded in your PHP code? — Oen44, May 02 '17 at 14:30
Check this SO it is same as what you asked for sending form data http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax — Nair Athul, May 02 '17 at 14:31
No, it is not uploaded. That's what I wanted to say by "not included". It only sends text input. — DevNico, May 02 '17 at 14:31

score 0 · Answer 1 · answered May 02 '17 at 14:39

You can do it through xhr, i.e.

$(':file').change(function(){
        var file = this.files[0];
        name = file.name;
        size = file.size;
        type = file.type;

        if(file.name.length < 1) {
        }
        else if(file.size > 100000) {
            alert("The file is too big");
        }
        else if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/gif' && file.type != 'image/jpeg' ) {
            alert("The file does not match png, jpg or gif");
        }
        else { 
            $(':submit').click(function(){
                var formData = new FormData($('*formId*')[0]);
                $.ajax({
                    url: './sql_parse.php',  //server script to process data
                    type: 'POST',
                    xhr: function() {  // custom xhr
                        myXhr = $.ajaxSettings.xhr();
                        if(myXhr.upload){ // if upload property exists
                            myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // progressbar
                        }
                        return myXhr;
                    },
                    // Ajax events
                    success: completeHandler = function(data) {
                        /*
                        * Workaround for Chrome browser // Delete the fake path
                        */
                        if(navigator.userAgent.indexOf('Chrome')) {
                            var catchFile = $(":file").val().replace(/C:\\fakepath\\/i, '');
                        }
                        else {
                            var catchFile = $(":file").val();
                        }
                        $('#affiche_resultat').html(data);
                    },
                    error: errorHandler = function() {
                        alert("Something went wrong!");
                    },
                    // Form data
                    data: formData,
                    // Options to tell jQuery not to process data or worry about the content-type
                    cache: false,
                    contentType: false,
                    processData: false
                }, 'json');
            });
        }
    });

Send file and form via Jquery and show the result in div

1 Answers1