come inviare un file e un campo di input utilizzando JavaScript e Ajax per inviare uno script php

Question

Per favore qualcuno dovrebbe mostrarmi come farlo usando javascript. perché sto usando Javascript e Ajax per caricare la pagina che farà l'upload e poi dopo l'uso Javascript e Ajax per inviare il modulo a uno script php

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

I file sono in genere di dati, come il binario o davvero niente, non può essere semplicemente mandato come una querystring e concatenato in una stringa.

Per caricare i file con l'Ajax è necessario utilizzare la FormData object, che è supportato solo da IE10 e su, per browser meno recenti ajax di upload non è possibile, e soluzioni alternative con iframe, ecc deve essere 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); 
}