Загрузка файла и $ _POST с ошибкой AJAX

Question

Я пытаюсь загрузить файл и некоторый текст внутри текстового поля вместе с помощью AJAX. Я получаю следующее сообщение об ошибке на странице PHP, которая получает данные:

Примечание: Undefined индекс: Guion в файле/путь/здесь по линии X

Это означает, что файл не отправляется. Пробовал var_dump $_FILES и вывод его:

array(0) { } 

HTML код:

<div id="_AJAX_"></div> 

<div role="form"> 
    <div id="fileGuionGroup" class="form-group"> 
    <label for="guion">Archivo Gui&oacute;n</label> 
    <input id="fileGuion" type="file" name="guion"> 
    </div> 

    <div id="txtComentarioGroup" class="form-group"> 
    <label for="comentario">Comentario</label> 
    <textarea id="txtComentario" class="form-control" name="comentario" rows="4" placeholder="Ejemplo: Solicito que por favor se monte este curso en plataforma."></textarea> 
    </div> 
</div> 

<button id="send_request" type="button" class="btn btn-primary btn-block" onclick="submitSolicitud(`{$cursoKey}`)"><i class="fa fa-fw fa-cogs"></i> Solicitar Montaje</button> 

Javascript Код:

function submitSolicitud(cursoKey) { 
    var fileGuion  = document.getElementById('fileGuion'); 
    var txtComentario = document.getElementById('txtComentario'); 

    var formGroupGuion  = document.getElementById('fileGuionGroup'); 
    var formGroupComentario = document.getElementById('txtComentarioGroup'); 

    formGroupGuion.className  = "form-group"; 
    formGroupComentario.className = "form-group"; 

    var guion  = fileGuion.value; 
    var comentario = txtComentario.value; 

    var formData = new FormData(); 
    formData.append('guion', guion); 
    formData.append('comentario', comentario); 

    connect = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); 

    connect.onreadystatechange = function() { 
    onRSCallback(cursoKey); 
    }; 

    connect.open('POST', '?view=modalsMatriz&modal=montaje&id=' + cursoKey + '&action=solicitarMontaje', true); 
    connect.setRequestHeader("Content-Type", "multipart/form-data"); 
    connect.setRequestHeader("X-File-Name", guion.name); 
    connect.setRequestHeader("X-File-Size", guion.size); 
    connect.setRequestHeader("X-File-Type", guion.type); 
    connect.send(formData); 
}; 

PHP код:

case 'solicitarMontaje': 

    // This is the line that has the error of undefined index. 
    die($_FILES['guion']); 

    try { 
    if (!isset($_FILES['guion'])) { 
     # Code 1: Archivo Guión Field vacía 
     throw new Exception(1); 
    } elseif (!isset($_POST['comentario']) || $_POST['comentario'] == "") { 
     # Code 2: Comentario Field vacío 
     throw new Exception(2); 
    } 

    $tmp_file = $_FILES['guion']['tmp_name']; 
    $filename = $_FILES['guion']['name']; 

    move_uploaded_file($tmp_file, 'uploads/guiones/'.$filename); 

    die(0); 
    //$curso->crearSolicitudMontaje($_POST['comentario']); 
    } catch (Exception $e) { 
     # Output message to the screen so that Ajax captures it via connect.responseText @curso_FormMontaje.js 
    echo $e->getMessage(); 
    } 
break; # ./ case 'solicitarMontaje' 

Я пробовал его с помощью FormData() и Content-Type multipart/form-data, но это не сработало. Вместо этого он заставлял страницу встраиваться в div _AJAX_, который показывает сообщения, возвращаемые с сервера (например, сообщения об успешном завершении, ошибки в некоторых полях, а также поля, которые были отправлены пустым).

Это то, что я получаю в результате использования FormData при нажатии на кнопку отправки:

https://postimg.org/image/rsnrt3yq9/

Answer 1

Оказывается, что причиной были проблемы с заголовками HTTP (setRequestHeader). Я удалил их и отредактировали код немного, вот как он выглядит теперь полностью функциональный:

JavaScript Код:

function submitSolicitud(cursoKey) { 
    var fileGuion  = document.getElementById('fileGuion'); 
    var txtComentario = document.getElementById('txtComentario'); 

    var guion  = fileGuion.files[0]; 
    var comentario = txtComentario.value; 

    var formData = new FormData(); 

    formData.append('guion', guion); 
    formData.append('comentario', comentario); 

    connect = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); 

    connect.onreadystatechange = function() { 
    onRSCallback(cursoKey); 
    }; 

    connect.open('POST', '?view=modalsMatriz&modal=montaje&id=' + cursoKey + '&action=solicitarMontaje', true); 

    connect.send(formData); 
};  

Как и ожидалось, данные признаны PHP, как показано ниже:

• файл "Guion" входит в массив в PHP $ _FILES ($_FILES['guion']).

• "comentario" поле (текстовое поле) отправляется в $ _POST массив в PHP ($_POST['comentario']).

Наконец, как HTML и PHP код остался прежним, и вывод о том, что не устанавливая заголовки HTTP они, кажется, автоматически принимают правильное значение, так что запрос процессы правильно.

Answer 2

Вот очень простой пример, данные формы, учитывая то, что вы предоставили:

<script> 
$(document).ready(function(){ 
    // I don't know what your form is called... 
    $('.uploader').submit(function(e) { 
     // Clone the file input 
     var getFileInput = $("#fileGuion").clone(); 
     // Stop form from submitting 
     e.preventDefault(); 
     $.ajax({ 
      url:'/url/to/ajax/dispatcher.php', 
      // Use FormData object, pass form 
      data: new FormData($(this)[0]), 
      processData: false, 
      contentType: false, 
      type: 'post', 
      success: function(response) { 
       // Put html back into placeholder 
       $('#_AJAX_').html(response); 
       // Replace the input 
       $("#fileGuion").replaceWith(getFileInput); 
      } 
     }); 
    }); 
}); 
</script> 
<div id="_AJAX_"></div> 
<form class="uploader"> 
    <label for="guion">Archivo Gui&oacute;n</label> 
    <input id="fileGuion" type="file" name="guion"> 
    <label for="comentario">Comentario</label> 
    <textarea id="txtComentario" class="form-control" name="comentario" rows="4" placeholder="Ejemplo: Solicito que por favor se monte este curso en plataforma."></textarea> 
    <label> 
     <input type="checkbox" id="ackCheckbox"> <i>He revisado y estoy seguro de continuar con esta acci&oacute;n.</i> 
    </label> 
    <input type="submit" value="Upload"> 
</form>