Get files in input type files with JQuery and move it

Question

I have an issue, I got a form with some input type text and One input type file. I get all information AND the name of the file with jQuery and send it to a PHP page. My issue is, I want to get this file in jquery and move it in a specific folder in the server OR maybe send it to the PHP file and then I will use move_uploaded_file method.

Any help please ?

My FORM :

<div>
    <p class="lead"><b>Cr&eacute;ation Push</b></p>
    <form id="formAjoutpush" class='form-horizontal' action="PHP/ajoutpush.php">
        <div class="form-group">
            <label class="col-sm-2 control-label">Type</label>
            <div class="col-xs-10">
                <input id="typepush" type='text' class='form-control' placeholder="Type de Push">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Produit</label>
            <div class="col-xs-10">
                <input id="marche" type='text' class='form-control' placeholder="Saisie du produit">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Pays</label>
            <div class="col-xs-10">
                <input id="pays" type='text' class='form-control' placeholder="Localisation">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Important</label>
            <input type="checkbox" id="isImportant">
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Titre</label>
            <div class="col-xs-10">
                <input id="titrefr" style="width: 49%; display: inline" type='text' class='form-control' placeholder="Titre en Français">
                <input id="titreuk" style="width: 49%; display: inline" type='text' class='form-control' placeholder="Titre en Anglais">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Contenu</label>
            <div class="col-xs-10">
                <textarea id="contenufr" style="width: 49%; display: inline" class='form-control' rows="7" placeholder="Contenu en Français"></textarea>
                <textarea id="contenuuk" style="width: 49%; display: inline" class='form-control' rows="7" placeholder="Contenu en Anglais"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Graph</label>
            <div class="col-xs-10">
                <input id="graph" type='file' name="graph" class='form-control' placeholder="Inserer un graphique" accept=".jpg,.png,.jpeg,.gif">
                <div id="image" style="display: none">
                    <img id="preview" src="" alt="" width="300" height="200"/>
                </div>
            </div>
        </div>
        <div class='form-group'>
            <div class='col-sm-offset-2 col-sm-10'>
                <button id="btnValiderAjout" type='submit' class='btn btn-primary' >Valider</button>
                <button type='reset' id="btnAnnulerAjout" class='btn btn-danger'>Annuler</button>
            </div>
        </div>
    </form>
    <div class="result"></div>
    <div id="resultat" style="text-align: center; color: green"></div>
</div>

My Javascript :

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#graph").change(function () {
        $("#image").slideDown();
        readURL(this);
    });
$(document).ready(function () {

    $('#btnValiderAjout').click(function (e) {
        e.preventDefault();
        var type = $('#typepush').val();
        var marche = $('#marche').val();
        var pays = $('#pays').val();
        var titrefr = $('#titrefr').val();
        var titreuk = $('#titreuk').val();
        var contenufr = $('#contenufr').val();
        var contenuuk = $('#contenuuk').val();

        if ($('#graph').val() == '') {

        } else {
            var filename = $('#graph').val().replace(/C:\\fakepath\\/i, '');
            var extension = filename.substr(filename.lastIndexOf(".") + 1);
            var nomFinal = filename.replace(filename, $.now() + '.' + extension);
        }

        var idu;
        var isImportant;
        if ($('#isImportant').is(':checked')) {
            isImportant = 1;
        }
        else {
            isImportant = 0;
        }

//        test des valeurs saisies
        if (type == "" || marche == "" || pays == "" || titrefr == "" || titreuk == "" || contenufr == "" || contenuuk == "") {
            if (type == "") {
                $('#typepush').css("border-color", "red");
                $('#typepush').on('input', function () {
                    $('#typepush').css("border-color", "green");
                });
            }
            if (marche == "") {
                $('#marche').css("border-color", "red");
                $('#marche').on('input', function () {
                    $('#marche').css("border-color", "green");
                });
            }
            if (pays == "") {
                $('#pays').css("border-color", "red");
                $('#pays').on('input', function () {
                    $('#pays').css("border-color", "green");
                });
            }
            if (titrefr == "") {
                $('#titrefr').css("border-color", "red");
                $('#titrefr').on('input', function () {
                    $('#titrefr').css("border-color", "green");
                });
            }
            if (titreuk == "") {
                $('#titreuk').css("border-color", "red");
                $('#titreuk').on('input', function () {
                    $('#titreuk').css("border-color", "green");
                });
            }
            if (contenufr == "") {
                $('#contenufr').css("border-color", "red");
                $('#contenufr').on('input', function () {
                    $('#contenufr').css("border-color", "green");
                });
            }
            if (contenuuk == "") {
                $('#contenuuk').css("border-color", "red");
                $('#contenuuk').on('input', function () {
                    $('#contenuuk').css("border-color", "green");
                });
            }
        } else {
            var param = "type=" + type + "&marche=" + marche + "&pays=" + pays + "&titrefr=" + titrefr + "&titreuk=" + titreuk + "&contenufr=" + contenufr + "&contenuuk=" + contenuuk + "&isImportant=" + isImportant + "&img=" + nomFinal;
            $('#resultat').load("./PHP/ajoutpush.php", param);
            $("#formAjoutpush")[0].reset();
            $('#resultat').delay(5000).fadeOut('slow');
            $("#image").slideUp();
        }
    });

});

Answer 1

Add enctype="multipart/form-data" to form to enable upload of files

<form id="formAjoutpush" class='form-horizontal' action="PHP/ajoutpush.php" enctype="multipart/form-data">