如何使用JavaScript和Ajax发送文件和输入字段来发送php脚本

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