Aprende a cargar un archivo dentro de un formulario de forma asincrónica con jQuery ajax.

Enviar un archivo de la forma tradicional es una tarea sencilla (formulario, entrada de archivo y botón de envío). Sin embargo, no es tan fácil cuando queremos hacerlo con javascript y no es tan intuitivo. Para realizar esta tarea, necesitamos jQuery (o usar la función xmlHttpRequest) y paciencia. 

El formulario html debe verse así, una simple entrada de archivo (los parámetros de texto son opcionales, es solo para demostrar que podemos enviar más información, no solo el archivo).

<form id="myform" method="post">
  <input type="text" name="username" />
  <input type="file" name="upload" />
</form>

Para enviar un archivo con ajax, debe enviar una solicitud ajax enviando datos POST, el siguiente código hará el truco por usted:

Nota: en este ejemplo esperamos del servidor json (dataType: json), puede enviar su propio tipo de respuesta.

var form = document.getElementById("myform");
// o con jQuery
//var form = $("#myform")[0];

$.ajax({
  url:"/web-service/that/will-process/our-image",
  data: new FormData(form),// la función formData está disponible en casi todos los navegadores nuevos.
  type:"post",
  contentType:false,
  processData:false,
  cache:false,
  dataType:"json", // Cambie esto de acuerdo con su respuesta del servidor.
  error:function(err){
        console.error(err);
  },
  success:function(data){
       console.log(data);      
  },
  complete:function(){
   console.log("Solicitud finalizada.");

  }
});

La variable form será el elemento de nodo de la forma. Entonces solo necesitamos recuperar el archivo en el backend.

Symfony 2

Recuperaremos el archivo con el objeto de solicitud del controlador. Luego lo moveremos y devolveremos una respuesta JSON.

// Importante para usar estas declaraciones, la respuesta json es opcional para su respuesta.
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;

public function retrieveAction(Request $request){
   // recuperar el archivo con el nombre dado en el formulario.
   // do var_dump($request->files->all()); si necesita saber si el archivo se está cargando.
   $file = $request->files->get('upload');
   $status = array('status' => "success","fileUploaded" => false);
  
   // If a file was uploaded
   if(!is_null($file)){
      // generar un nombre aleatorio para el archivo pero mantener la extensión
      $filename = uniqid().".".$file->getClientOriginalExtension();
      $path = "/path/where/we/want-to-save-the-file";
      $file->move($path,$filename); // mover el archivo a una ruta
      $status = array('status' => "success","fileUploaded" => true);
   }

   return new JsonResponse($status);
}

PHP plano

$info = pathinfo($_FILES['upload']['name']);
$ext = $info['extension']; // obtener la extensión del archivo
$newname = "thenamethat you want.".$ext; 

$target = 'path-where-to-save-the-file/'.$newname;
move_uploaded_file( $_FILES['upload']['tmp_name'], $target);

Puede configurar el backend de acuerdo con sus necesidades (si no está usando php, por ejemplo), ¡Que te diviertas!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores