Con salida de WordPress 2.5 una de las características que talves llamen mas la atención es la posibilidad de subir múltiples imágenes al mismo tiempo, pero no solo eso también te muestre un barra de porcentaje para saber cuanto se subio, y al menos WordPress no lo tiene habilitado pero estos mismos scripts te ofrecen la posibilidad que al hacer click en el botón Examinar la ventana de exploración únicamente te muestre archivos de un formato especifico, por ejemplo que solo te muestre archivos con extensiones .jpg, .gif y .png.
Pero bueno que soluciones hay para hacer esto? investigando he encontrado dos que podria decir son las mejores:
- FancyUpload
- SWFUpload (Este lo usa WordPress 2.5)
FancyUpload
Es un libreria javascript que es dotado de toda su potencia por MooTools, es realmente facil de implementar y tiene la posibilidad de resivir varios parametros para sus funciones, sus caracteristicas son:
- Selección y cargar de múltiples archivos
- Filtro por tipo de archivo en la ventana de selección (Examinar)
- Manejo de Eventos, se puede crear nuevos eventos
- Puedes mostrar y filtrar información de los archivos antes de iniciar la carga (tamaño del archivo, tiempo de carga, etc…)
- Limites en los uploads tanto en cantidad de archivos como en su peso por Kb
- Plataforma independiente, solo necesita Flash 8 o superior
- EL proceso es discreto, desde el reemplazo del elemento hasta la carga del SWF
- Puedes cancelar cargas y añadir nuevos archivos durante la carga de un archivo, al momento
- Todo es opciones, esta documentado y es realmente fácil de editar
- Las cargas de archivos son con un estilo Ajax es decir la pagina no se recarga.
- Indicador del progreso de los Uploads
En si FancyUpload aprovecha Swiff el cual es una manera de insertar ActionScript y archivos flash mediante simple JavaScript, haciendo que el Flash este totalmente oculto al visitante pero dotando de buenas funcionalidad que el ActionScript permite.
Enlaces: Ver Demo / Pagina Oficial – Descargar FancyUpload / Foro de Soporte
SWFUpload
SWFUpload es otra librería en JavaScript que básicamente nos permite las misma funciones que FancyUpload a diferencia que esta no necesita de ningún FrameWork como es MooTools, y tampoco causa conflictos si usamos alguno, como su nombre lo dice SWFUpload también utilizan flash (SWF es la extención de los archivos resultantes de Flash) e igual que en el anterior es totalmente transparente ya que JavaScript se encarga de insertarlo.
Sus caracteristicas son:
- Selección y cargar de múltiples archivos
- Filtro por tipo de archivo en la ventana de selección (Examinar)
- Manejo de Eventos, se puede crear nuevos eventos
- Puedes mostrar y filtrar información de los archivos antes de iniciar la carga (tamaño del archivo, tiempo de carga, etc…)
- Limites en los uploads tanto en cantidad de archivos como en su peso por Kb
- Plataforma independiente, solo necesita Flash 8 o superior
- EL proceso es discreto, desde el reemplazo del elemento hasta la carga del SWF
- Puedes cancelar cargas y añadir nuevos archivos durante la carga de un archivo, al momento
- Todo es opciones, esta documentado y es realmente fácil de editar
- Las cargas de archivos son con un estilo Ajax es decir la pagina no se recarga.
- Indicador del progreso de los Uploads
- “Graceful degradation” para navegadores que no soporte el otro método.
- Los nombre de las clases permiten la compatibilidad con otras librerías de JavaScript (ej., jQuery, Prototype, etc.).
- Permite crear parámetros personalizados
Enlaces: Ver Demo / Pagina Oficial – Descargar SWFUpload / Documentación
Ambos son realmente fácil de implementar, en el caso de SWFUpload que se necesita? descargar descomprimir, incluir los archivos JS en tu archivo HTML y crear un formulario con un input del tipo file.
Mejor por si no me entendieron ni un poquito aquí les va el JavaScript que deben iniciar:
[code lang=”javascript”]
var swfu;
window.onload = function () { swfu = new SWFUpload({
file_post_name : “Filedata”,
upload_url : “http://www.swfupload.org/upload.php”,
flash_url : “http://www.swfupload.org/swfupload_f9.swf”,
file_size_limit : “20480”,
file_types : “*.jpg;*.gif”,
file_types_description: “Web Image Files”,
}); };
[/code]
HTML
[code lang=”html”]
[/code]
Eso es todo, lo que tienen que hacer, upload_url y flash_url, deben ser archivos contenidos en tu sitio web, en el caso de flash_url el archivo viene incluido en el archivo que descargas.
file_size_limit : “20480”,
se me hace mucho el tamaño limite de la imagen, a ti no?
aqui les paso un codigo en php
————————————-
Cantidad1 :
Cantidad2 :
Cantidad2 :
<?php
$uploaddir=$_SERVER[‘DOCUMENT_ROOT’].”/perwaq/multi_imagen/ima/”;
if(isset($_POST[‘Submit’])){
$cantidad2 =count($_FILES[“archivo”]);
for ($j=0;$j<=$cantidad2;$j++){
$archivo = $_FILES[“archivo”][“tmp_name”][$j];
$tamanio = $_FILES[“archivo”][“size”][$j];
$tipo = $_FILES[“archivo”][“type”][$j];
$nombre = $_FILES[“archivo”][“name”][$j];
$x=$j;
do{
$x++;
if( $archivo != “” ){
$fp = fopen($archivo, “rb”);
$contenido = fread($fp, $tamanio);
$contenido = addslashes($contenido);
fclose($fp);
//AQUI INSERTE EN LA BASE DE DATOS
if(copy($archivo, $uploaddir.$nombre))
{
echo $nombre.” Subido con Exito”;
}
}
}while($x
@Betzabe Salas en el caso de WordPress las guarda en el folder */wp-content/uploads/
Ahora si lo estas implementado en algun otro sitio.
Entre los parametros tienes este:
upload_url : “upload.php”
El cual enviara los datos de tu imagen al archivo upload.php y en ese mismo archivo puedes definir a donde quieres que se guarde la imagen con la funcion move_uploaded_file de PHP
saludos espero esto te sirva, de todos modos te invito a inscriberte al sitio y publicar tus dudas en el foro apartir del dia lunes.
Seguro ahi te podre ayudar mas a detalle y podras recibir a poyo de algun otra persona.
En que carpeta guarda el swfUpload los archivos subidos?
Hola victor si que lo manda, mira imprime la variable $_FILES y vera cual es la posicion del array q contiene el tipo de formato y de esa manera lo filtras, print_r($_FILES);
Ahora si lo que quieres es verificarlo antes de iniciar la carga, si no mal recuerdo el swfUpload tiene un archivo Js llamado handlers el cual puedes modificar se trata de los eventos que se ejecutan tras cada accion del script.
lo q yo necesitaba era un filtro para los tipos de archivo, lo hace, pero no manda el archivo en si al script de upload que puedo hacer??
Pfff! Justo lo que hacía falta 🙂 muchas gracias!! Sin duda es algo que extrañaba en este nuevo WP