JQuery post data and file upload and get result as JSON

Question

HTML :

<input id="myId" type="text">
<input id="newFile" type="file" name="newFile" >
<input type="button" onclick="sendData()" value="Send" >

JQuery:

function sendData() {
    var id = $("#myId").val();
    var myFile = $("#newFile").val();
    $.post("test.php", { id: id , file: myFile  },function (data) {
        console.log(data);
     }, "json").fail(function (data) {
        alert("error");
    });
}

this code post id value and the file name !!
i want to post file ..

possible duplicate of [jQuery Ajax File Upload](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — gusjap, Aug 02 '15 at 18:17
you could use https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data jquery plugin — Artem Baranovskii, Aug 02 '15 at 18:18

score -1 · Answer 1 · answered Aug 02 '15 at 18:18

to upload file with AJAX, try this:

var formData = new FormData();

var cpt = 0;

$("input[type=file]").each(function () {
    $.each(this.files, function (i, file) {
        formData.append("file" + cpt++, file);
    });
});

$.ajax({
    url : "serveur.php",
    type : "POST",
    data : formData,
    processData : false, 
    contentType : false, 
    dataType : "json",
})
.done(function (reponse) {

});

JQuery post data and file upload and get result as JSON

1 Answers1