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

}

adeneo · Accepted Answer · 2015-05-27 10:53:09Z

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);
}

answered May 27, 2015 at 10:53

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chisimdi Damian Ezeanieto Over a year ago

Its not returning anything. on my browser's javascript console this is what it displays: FormData {append: function}.

adeneo Over a year ago

And what is it supposed to return? Note that you have to edit this to make it fit what you're doing, and catch the files on the serverside etc.

Chisimdi Damian Ezeanieto Over a year ago

this is what i get when i do print_r($_POST) in my php script: Array ( [------WebKitFormBoundaryNXYmmE Content-Disposition:_form-data;_name] => "select" ------WebKitFormBoundaryNXYmmE-- )

adeneo Over a year ago

It's a file, it's probably going to be in $_FILES, you should read up on how you handle files in PHP as well.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related