0

No sé que está ocurriendo pero no puedo subir archivos con php/ajax no me reconoce el index archivo, Mi código:

Html:

<div class="wrapper-attachment" data-type="attachment" style="display: none;">
  <form name='archivo' enctype="multipart/form-data" class='formulario'>
    <input type="file" class="hidden inputAttachment"/>
  </form>
  <div class="buttonAddAttach">
    <div class="img-wrapper buttonImage">
      <i class="icon-cloud-upload"></i>
    </div>
    <span class="buttonText">Subir archivo</span>
  </div>
</div>

JS:

$(document).on('change','.inputAttachment',function(e){
  var formData = new FormData($(this).parent()[0]);
  $.ajax({
    url: base_url + 'Task/upAttach',
    type: "POST",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success:function(e){
      alert("exito");
      console.log(e);
    },
    error:function(e){
      alert("error");
      console.log(e);
    }
  });
});

PHP:

public function upAttach(){

  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && 
     strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 
  {

    //obtenemos el archivo a subir
    $file = $_FILES['archivo']['name'];

    //comprobamos si existe un directorio para subir el archivo
    //si no es así, lo creamos
    if(!is_dir("files/")) 
    mkdir("files/", 0777);

    //comprobamos si el archivo ha subido
    if ($file && move_uploaded_file($_FILES['archivo']['tmp_name'],"files/".$file))
    {
      sleep(3);//retrasamos la petición 3 segundos
      echo $file;//devolvemos el nombre del archivo para pintar la imagen
    }
  }else{
    throw new Exception("Error Processing Request", 1);   
    echo ("error");
  }
}
1
  • ¿Aún no has encontrado una solución a tu problema? ¿Ninguna de las respuestas ha sido de ayuda? De lo contrario, considera marcar como aceptada la que ayudo solucionar tu problema y/o votar
    – Marcos
    Commented el 24 ago. 2017 a las 13:26

2 respuestas 2

0

Si imprimes en consola de JavaScript el contenido de tu variable formData seguramente está vacía. Hasta donde recuerdo JQuery no incluye archivos en sus métodos ajax.

Estoy tomando el ejemplo de aquí y adaptándolo a tu caso; no olvides nombrar el input del archivo ya que en el código original no tiene nombre:

var files;
$('input[type=file]').on('change', prepareUpload);
function prepareUpload(event){
 files = event.target.files;
}

$('form_archivo').on('submit', uploadFiles);

function uploadFiles(event){
  event.stopPropagation();
  event.preventDefault();
  var data = new FormData();

$.each(files, function(key, value){
    data.append(key, value);
  });

  $.ajax({
    url: base_url + 'Task/upAttach',
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(data, textStatus, jqXHR){
      if(typeof data.error === 'undefined'){
        submitForm(event, data);
      } else {
        console.log('ERRORS: ' + data.error);
      }
    }, error: function(jqXHR, textStatus, errorThrown){
      console.log('ERRORS: ' + textStatus);
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='archivo' id="form_archivo" enctype="multipart/form-data" class='formulario'>
  <input type="text" name="texto" placeholder="escribe algún texto"><br />
  <input type="file" name="files" class="hidden inputAttachment"/><br />
  <input type="submit">
</form>
<br />
<div class="buttonAddAttach">
  <div class="img-wrapper buttonImage">
    <i class="icon-cloud-upload"></i>
  </div>
  <span class="buttonText">Subir archivo</span>
</div>

En tu código PHP puedes hacer inicialmente un exit(var_dump($_FILES)); para saber que en realidad estás enviando archivos.

0

Los errores en tu código son:

  • El <input type="file" no tiene name.
  • El <form tiene el nombre que deberia tener el input

Solución:

Modificar tu markup de la siguiente forma:

<form enctype="multipart/form-data" class='formulario'>
  <input name="archivo" type="file" class="hidden inputAttachment"/>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.