how to send a file and an input field using JavaScript and Ajax to send a php script

Question

Please someone should show me how to do this using javascript. because am using javascript and ajax to load the page that will do the upload and then after use javascript and ajax to submit the form to a php script

function AddMultipleContact(){
    var xmlhttp;
  if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
var url = "url.php";
var group = document.getElementById("select-input").value;
var file = document.getElementById('file-name').files;
var variables = "select-input="+group+"&file-name="+file;

xmlhttp.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// Access the onreadystatechange event for the XMLHttpRequest object
xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var data = xmlhttp.responseText;
        document.getElementById("flash-message").innerHTML = data;
    }
}
xmlhttp.send(variables); // Actually execute the request

}

Answer 1

Files are generally data, like binary or really anything, it can't just be sent as a querystring and concantenated into a string.

To upload files with ajax you have to use the FormData object, which is only supported from IE10 and up, for older browsers ajax upload isn't possible, and workarounds with iframes etc. has to be implented

function AddMultipleContact() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var url      = "url.php";
    var group    = document.getElementById("select-input").value;
    var files    = document.getElementById('file-name').files;
    var formData = new FormData();

    for (var i = 0; i < files.length; i++) {
        var file = files[i];

        formData.append('files[]', file, file.name);
    }    

    formData.append('select_input', group);

    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var data = xmlhttp.responseText;
            document.getElementById("flash-message").innerHTML = data;
        }
    }
    xmlhttp.send(formData);
}