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

Question

请有人告诉我如何使用 javascript 执行此操作。因为我使用 javascript 和 ajax 加载将进行上传的页面，然后使用 javascript 和 ajax 将表单提交到 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

文件通常是数据，比如二进制或任何其他东西，它不能只是作为查询字符串发送并连接成字符串。

要使用 ajax 上传文件，您必须使用 FormData object ，只有 IE10 及更高版本支持，对于较旧的浏览器，ajax 上传是不可能的，必须使用 iframe 等解决方法

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