2

Estoy tratando de enviar por ajax un archivo por medio de un input file, pero el PHP me retorna un error.

¿Cómo se pueden enviar archivos tipo "file" por ajax?

EL CÓDIGO HTML

<form id="form" enctype="multipart/form-data">
    <input type="file" name="archivo" id="archivo">
    <p>
    <input type="submit" name="submit">
</form>

EL CÓDIGO AJAX

$(document).ready(function($) {
   //// METODO PARA INSERTAR LOS DATOS //// 
    $("#form").submit(function() {
        event.preventDefault();

        var cadena = $(this).serializeArray();

        $.ajax({
            url: 'php.php',
            type: 'POST',
            data: cadena
        })      
        .done(function(respuesta) {

            var resultado = $.parseJSON(respuesta);
            console.log(resultado);
        .fail(function() {
            console.log("error");
        });
});
});

EL CÓDIGO PHP

<?php
    $nombre = array($_POST['archivo']);
    echo json_encode($nombre);
?>
7
  • quieres enviar el archivo a la base de datos?
    – DoubleM
    Commented el 5 ene. 2017 a las 19:54
  • @JuankGlezz, considero que no es un duplicado ya que evidentemente el OP no conoce la API FormData
    – Marcos
    Commented el 5 ene. 2017 a las 19:57
  • si..quiero enviar el archivo a la base de datos pero antes de hacerlo necesito la prueba con el ajax ya que si no usuara ajax los archivos compilan de manera correcta pero necesito es enviar ese file por ajax
    – JDavid
    Commented el 5 ene. 2017 a las 19:58
  • que funcionalidad tiene esto? new FormData(); y de que manera podria resolver mi problema?
    – JDavid
    Commented el 5 ene. 2017 a las 20:02
  • Puedes revisar este post en ingles stackoverflow.com/questions/2320069/jquery-ajax-file-upload
    – cignius
    Commented el 5 ene. 2017 a las 20:36

2 respuestas 2

3

Los input de tipo file van a la variable $_FILES

$nombre = $_FILES['file-0'];

sobre javascript debes realizar esto

var data = new FormData();
jQuery.each($('input[type=file]')[0].files, function(i, file) {
    data.append('file-'+i, file);
});
var other_data = $('form').serializeArray();
$.each(other_data,function(key,input){
    data.append(input.name,input.value);
});
jQuery.ajax({
    url: 'php.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});
2
  • igualmente si retornara ese $_FILES me devuelve un valor vacio
    – JDavid
    Commented el 5 ene. 2017 a las 20:01
  • Hola, ¿al final conseguiste solucionarlo? Tengo exactamente el mismo problema: Cuando realizo en envío del form sin usar ajax obtengo sin problemas los valores del fichero pero si lo hago por ajax nada... Commented el 14 sept. 2017 a las 6:19
1

Recomedaria evalues hacer uso del FormData para enviar un archivo usando ajax

Ajax File Upload with Form Data using PHP

como veras en el ejemplo asigna el this al usar

 data: new FormData(this),

algo como ser

   $.ajax({
        type: 'POST',
        url: 'submit.php',
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        .
        .

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