duancaozen6066 2016-07-25 23:26
浏览 146
已采纳

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

I'm trying to upload a file and some text inside a textarea together using AJAX. I'm getting the following error in the PHP page that receives the data:

Notice: Undefined index: guion in file/path/here on line X

It means that the file is not being sent. Tried var_dump $_FILES and it output:

array(0) { }

HTML Code:

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

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

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'

I've tried it using FormData() and Content-Type multipart/form-data but it did not work at all. Instead it was making the page be embedded inside the _AJAX_ div that shows the messages returned from the server (such as success messages, errors at some fields i.e fields that were sent empty).

This is what I get as result using FormData when clicking the submit button:

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

  • 写回答

2条回答 默认 最新

  • dongwo5686 2016-07-30 14:25
    关注

    Turns out that what was causing issues were the HTTP headers (setRequestHeader). I removed them and edited the code a little bit, here's what it looks like now fully functional:

    JavaScript Code:

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

    As expected, the data is recognized by PHP as below:

    • The file "guion" comes into PHP's $_FILES array ($_FILES['guion']).

    • The "comentario" field (textarea) is sent inside PHP's $_POST array ($_POST['comentario']).

    Finally, both HTML and PHP code stayed the same and the conclusion is that by not setting the HTTP headers they seem to take the proper value automatically so that the request processes correctly.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 maccms影视模板 制作影视网站失败 求
  • ¥15 stm32按键设置闹钟数进退位不正常
  • ¥15 三电平逆变器中点电位平衡问题
  • ¥20 这怎么写啊 java课设
  • ¥15 用C语言完成一个复杂的游戏
  • ¥15 如何批量更改很多个文件夹里的文件名中包含文件夹名?
  • ¥50 MTK手机模拟HID鼠标出现卡顿
  • ¥20 求下下面这个数据结构代码
  • ¥20 前端 二进制文件流图片转化异常
  • ¥15 github上的这个C语言项目如何跑起来