1

Tengo este código:

function subirArchivos()
{
    var archivos = null;
    var imagen = $("#uploadImage")[0];
    var video = $("#uploadVideo")[0];
    var formData = new FormData();
    formData.append("uploadArchivos[0]", imagen.files[0]);
    formData.append("uploadArchivos[1]", video.files[0]);

     $.ajax({
        url: 'uploadArchivos.php',  
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        xhr: function () {
            xhr = $.ajaxSettings.xhr();
            $("#cargar").show();
            $("#cargar .progress-bar").attr("aria-valuenow", 0);
            $("#cargar .progress-bar").css("width", "0%");

            xhr.upload.onprogress = function(ev) {
                if (ev.lengthComputable)
                {
                    var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                    $("#cargar .progress-bar").attr("aria-valuenow", percentComplete);
                    $("#cargar .progress-bar").css("width", percentComplete + "%");

                    if(percentComplete == 100)
                    {
                        setTimeout(function(){
                            $("#cargar").hide();        
                        }, 2000);
                    }
                }
            }

            return xhr;
        },
        success: function(data){
            if(data != "error")
                archivos = jQuery.parseJSON(data);
            else
                $("#error-subir").show();
        }
    });

    return archivos;
}

La función subirArchivos() como pueden ver se encarga de subir archivos al servidor por medio de una petición ajax, ahora cuando recibo respuesta del servidor en la función que se invoca en el success, si la respuesta es diferente a error lo que hago es parsear el JSON que se esta recibiendo y posteriormente lo guardo en la variable archivos ya que esta es la que pretendo que retorne como valor la función subirArchivos().

function insertarPelicula()
{   
    var formulario = $("#form-registro");

    var titulo = $("#tituloVal").val();
    var clasificacion = $("#clasificacionVal").val();
    var genero = $("#generoVal").val();
    var duracion = $("#duracionVal").val();
    var pais = $("#paisVal").val();
    var ano = $("#anoVal").val();
    var sinopsis = $("#sinopsisVal").val();
    var actores = $("#actoresVal").val();
    var directores = $("#directoresVal").val();

    if(formulario.valid())
    {
        var archivos = subirArchivos();

        if(archivos == null)
            return false;

        $.ajax({
            url: "insert.php",
            data: "titulo=" + titulo + "&clasificacion=" + clasificacion + "&genero=" + genero + "&duracion=" + duracion
                  + "&pais=" + pais + "&ano=" + ano + "&sinopsis=" + sinopsis + "&actores=" + actores
                  + "&directores=" + directores + "&archivos=" + JSON.stringify(archivos),
            type: "POST",
            success: function(data){
                if(data == 1)
                {
                    $("#correcto").fadeIn(3000);
                    setTimeout(function(){
                        window.location.reload(true);
                    }, 2000);
                }
                else
                    $("#error").fadeIn(3000);
            }
        }); 
    }
}

La función insertarPelicula() es la que invoca a la función subirArchivos() que devuelve un valor. El problema aquí es que no consigo que la función subirArchivos() me devuelva el JSON que se obtiene al subir los archivos, me devuelve puro null.

1 respuesta 1

1

Tu problema es un clásico: esperar un comportamiento síncrono de un código asíncrono.

Vamos a dividir tu función subirArchivos( ) es 2 partes: lo que se ejecuta síncrono (de principio a fín), y lo asíncrono.

function subirArchivos()
{
    var archivos = null;
    var imagen = $("#uploadImage")[0];
    var video = $("#uploadVideo")[0];
    var formData = new FormData();
    formData.append("uploadArchivos[0]", imagen.files[0]);
    formData.append("uploadArchivos[1]", video.files[0]);

    CÓDIGO ASÍNCRONO

    return archivos;
}

Aunque parezca que no, tu código se ejecuta exactamente como he mostrado. Todo el código síncrono se ejecuta de principio a fin. La parte asíncrona queda a la espera de poder ejecutarse: en tu caso, a la espera de la respuesta AJAX.

Queda claramente visible tu problema: tu variable archivos se retorna con el último valor asignado ... en tu caso, null.

La solución es la habitual en estos casos: no esperar un valor de retorno desde un código asíncrono, sino invocar desde el código asíncrono aquello que requiera dicho valor:

function insertarPelicula( ) {
  var formulario = $( "#form-registro" );
  var titulo = $( "#tituloVal" ).val( );
  var clasificacion = $( "#clasificacionVal" ).val( );
  var genero = $( "#generoVal" ).val( );
  var duracion = $( "#duracionVal" ).val( );
  var pais = $( "#paisVal" ).val( );
  var ano = $( "#anoVal" ).val( );
  var sinopsis = $( "#sinopsisVal" ).val( );
  var actores = $( "#actoresVal" ).val( );
  var directores = $( "#directoresVal" ).val( );

  if( formulario.valid( ) ) { subirArchivos( insertarRealmentePelicula ); }

  function insertarRealmentePelicula( archivos ) {
    if( archivos === null ) return;

    $.ajax( {
      url: "insert.php",
      data: "titulo=" + titulo + "&clasificacion=" + clasificacion + "&genero=" + genero + "&duracion=" + duracion + "&pais=" + pais + "&ano=" + ano + "&sinopsis=" + sinopsis + "&actores=" + actores + "&directores=" + directores + "&archivos=" + JSON.stringify( archivos ),
      type: "POST",
      success: function( data ){
        if( data == 1 ) {
          $( "#correcto" ).fadeIn( 3000 );
          setTimeout( function( ) {
            window.location.reload( true );
          }, 2000 );
        } else $( "#error" ).fadeIn( 3000 );
      }
    } );
  }

  function subirArchivos( cb ) {
    var archivos = null;
    var imagen = $( "#uploadImage" )[0];
    var video = $( "#uploadVideo" )[0];
    var formData = new FormData();
    formData.append( "uploadArchivos[0]", imagen.files[0] );
    formData.append( "uploadArchivos[1]", video.files[0] );

    $.ajax( {
      url: 'uploadArchivos.php',  
      type: 'POST',
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      xhr: function( ) {
        xhr = $.ajaxSettings.xhr( );
        $( "#cargar" ).show( );
        $( "#cargar .progress-bar" ).attr( "aria-valuenow", 0 );
        $( "#cargar .progress-bar" ).css( "width", "0%" );

        xhr.upload.onprogress = function( ev ) {
          if( ev.lengthComputable ) {
            var percentComplete = parseInt( ( ev.loaded / ev.total ) * 100 );

            $( "#cargar .progress-bar" ).attr( "aria-valuenow", percentComplete );
            $( "#cargar .progress-bar" ).css( "width", percentComplete + "%" );

            if( percentComplete == 100 ) {
              setTimeout( function( ){
                $("#cargar").hide( );
              }, 2000 );
            }
          }
        }

        return xhr;
      },
      success: function( data ) {
        if( data != "error" ) {
          archivos = jQuery.parseJSON( data );
          cb( archivos );
        } else
          $( "#error-subir" ).show( );
      }
    } );
  }
}

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.