Para subir un archivo con  jQuery y Ajax + PHP, en lugar de  utilizar un plugin ya desarrollado y probado,  podemos utilizar la lógica de cómo se envía un archivo con Ajax:

function uploadAjax(){

var inputFileImage = document.getElementById(“archivoImage”);

var file = inputFileImage.files[0];

var data = new FormData();

data.append(‘archivo’,file);

var url = “upload.php”;

$.ajax({

url:url,

type:’POST’,

contentType:false,

data:data,

processData:false,

cache:false});

}

Configurando el Html de la página, algo similar tiene que quedar el Input:

<input type=’file’ name=’archivoImage’ id=’archivoImage’ />

<input type=’button’ id=’botonSubidor’ onclick=’uploadAjax()’ />

También pueden hacerlo con jQuery:

$(document).ready(function() {     $(‘#botonSubidor’).click(‘uploadAjax’);})

Obviamente el html tiene que quedar así:

<input type=’file’ name=’archivoImage’ id=’archivoImage’ />

<input type=’button’ id=’botonSubidor’ />

El archivo upload.php

//upload.php

$return = Array(‘ok’=>TRUE);

$upload_folder =’images';

$nombre_archivo = $_FILES[‘archivo’][‘name’];

$tipo_archivo = $_FILES[‘archivo’][‘type’];

$tamano_archivo = $_FILES[‘archivo’][‘size’];

$tmp_archivo = $_FILES[‘archivo’][‘tmp_name’];

$archivador = $upload_folder . ‘/’ . $nombre_archivo;

if (!move_uploaded_file($tmp_archivo, $archivador)) {

$return = Array(‘ok’ => FALSE, ‘msg’ => “Ocurrio un error al subir el archivo. No pudo guardarse.”, ‘status’ => ‘error’);

}

echo json_encode($return);

Espero que esta información les sea de utilidad ¿Ustedes cómo lo harían?

Dentro de la programación Web es muy frecuente desarrollar una estructura modular compuesta por varios ficheros que vamos llamando según los necesitemos. Por ejemplo, todos conocemos  los includes o requires en PHP que nos permiten incluir ficheros dentro de otros. Esta técnica es especialmente útil en el marcado HTML para separar elementos comunes de las páginas como un header o un footer en archivos independientes que sólo hay que llamar cuando se necesiten.

Sin embargo, pese a que la mayoría de lenguajes incorporan de uno u otro modo esta funcionalidad (la de llamar e incluir otros archivos dentro de él mismo), JavaScript no la presenta de forma nativa. Es por ello que existen numerosas bibliotecas que expanden al lenguaje permitiendo estas inclusiones con un alto grado de control.

NOTA: Actualmente, gracias a la granularidad de los plugins en jQuery y a los patrones de expansión de módulos ya no resulta tan frecuente encontrar el getScript() como lo era en el pasado.

Si no queremos que nuestro código presente dependencias de terceros o simplemente queremos el control de nuestro propio codigo, podemos implementar nuestra propia función para añadir ficheros JavaScript a una página bajo demanda emulando la funcionalidad de estas bibliotecas o los comandos de otros lenguajes.

function CargaScript(url, callback) {
  var script = document.createElement('script');
 
  if (script.readyState) { // Internet Explorer
    script.onreadystatechange = function () {
      if (script.readyState === 'loaded' || script.readyState === 'complete') {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else { // Otros Navegadores
    script.onload = function() {
      callback();
    };
  }
 
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}

Sólo tenemos que hacer la distición entre el “famoso” Internet Explorer y los demás navegadores.

El funcionamiento de este código es añadir de forma dinámica una nueva etiqueta script a la cabecera de nuestra página (head) con la dirección URL del recurso a cargar. De forma adicional, incluimos un callback al estilo jQuery que se ejecutará tan pronto como nuestro nuevo script esté disponible.

NOTA: Por otro lado, si a ti te gusta hacer la carga asincrona de tus script, es decir, poner al último el llamado de tus scripts, lo único que tienes que hacer es cambiar el Tag ‘head’ por ‘body’.

EJEMPLO DE USO

Para un ejemplo sencillo, cargaremos la biblioteca del jQuery ubicada en un CDN.

var myLibrary = 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js';
 
loadScript(myLibrary, function(){
  alert('Ha cargado JQuery!');
});

Si ejecutamos el código anterior, en cuanto el script se cargue y esté disponible, recibiremos el alert definido en el callback avisando que se ha cargado correctamente.

Que tal usuarios:

Conforme va evolucionando internet, las páginas web se han vuelto mucho más dinámicas, y por lo tanto complejas de programar. Por ejemplo, hoy en día es normal que al completar un formulario de contacto con algún dato erróneo, sin recargar la página, se muestre el mensaje de error con alguna clase de efecto, aparición de un popup  o algo similar.

Estos efectos se logran utilizando JavaScript, que es un lenguaje que se ejecuta directamente en el navegador. JavaScript no es un lenguaje complicado, pero si lo que debemos hacer es complejo entonces requerirá mucho tiempo de programación. Ahí es donde entra en acción jQuery, brindándonos soluciones más simples a problemas comunes.

¿Qué es jQuery?

Se trata de un FrameWork de JavaScript. Un Framework es una librería que nos provee gran cantidad de funciones útiles que no son nativas del lenguaje de programación.

Con jQuery podemos hacer de forma simple muchas cosas, que realizarlas desde cero en JavaScript sería muy complicado.

Ventajas de utilizar jQuery:

• Funciones con efectos visuales e interacciones dinámicas (Ajax, auto-completar, elementos que aparecen/desaparecen, animaciones y más.).
• Compatibilidad total en los navegadores más comunes: Internet explorer 6 y superiores: Firefox, Chrome, Safari, Opera, entre otros.
• Si lo utilizamos correctamente no trae ningún problema con respecto a la indexación de los motores de búsqueda.

¿Qué debo saber para poder programar en jQuery?

Para programar en jQuery, antes debes conocer los aspectos básicos de HTML/CSS de una página web, debido a que Javascript trabaja siempre sobre elementos HTML y sus propiedades de CSS.

Si ya sabes programar en JavaScript, jQuery será un excelente complemento para ahorrarte tiempo y brindarte efectos visuales fáciles de utilizar.

En los próximos artículos veremos como comenzar a utilizar jQuery para nuestras webs.