使用AJAX上传文件和$ _POST失败

时间:2016-07-25 23:26:07

标签: javascript php jquery html ajax

我尝试使用AJAX在textarea中上传文件和一些文本。我在接收数据的PHP页面中收到以下错误:

  

注意:未定义索引:文件/路径中的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尝试了它,但它根本不起作用。相反,它使页面嵌入_AJAX_ div中,显示从服务器返回的消息(例如成功消息,某些字段的错误,即发送为空的字段)。< / p>

这是我在点击提交按钮时使用FormData得到的结果:

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

2 个答案:

答案 0 :(得分:0)

这是一个非常简单的表单数据示例,给出了您提供的内容:

<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>

答案 1 :(得分:0)

原来导致问题的是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 ”字段(textarea)在PHP的$ _POST数组($_POST['comentario'])内发送。

最后, HTML PHP 代码保持不变,结论是,如果不设置HTTP标头,它们似乎会自动采用正确的值,以便请求正确处理。