Miguel Manchego » filemanager http://www.miguelmanchego.com Desarrollador web freelancer php, css, ajax, cms.. Wed, 04 Jan 2012 13:10:33 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Jquery: Subir archivos usando AJAX http://www.miguelmanchego.com/2010/jquery-subir-archivos-usando-ajax/ http://www.miguelmanchego.com/2010/jquery-subir-archivos-usando-ajax/#comments Tue, 19 Oct 2010 11:50:30 +0000 admin http://www.miguelmanchego.com/?p=1106

Anteriormente publiqué este tutorial, debido a la gran cantidad de consultas he decidido publicar las respuestas y su actualización a una versión más moderna.

Implementación básica

Lo primero es descargar el plugin de la página de su creador http://www.uploadify.com/download/ esta última versión tiene varias opciones adicionales como la posibilidad de subir múltiples archivos, agregar eventos durante la carga, cuando se completa o cuand se produce un error además puede usar un archivo flash para mostrar el avance de la subida. Recomiendo leer su documentación, bastante completa por cierto, para ver las distintas posibilidades del plugin.

Para nuestro ejemplo básico basta con añadir las dependencias y el propio plugin en otras palabras llamamos a la librería jquery, al swfobject.js y al plugin(jquery.uploadify.v2.1.0.min.js), el único código HTML que necesitamos es:

1
<input type="file" name="fileInput" id="fileInput" />

Para que este simple input se convierta en nuestro uploader ajax añadimos en siguiente código en la cabecera:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader'  : 'uploadify.swf',
'script'    : 'uploadify.php',
'cancelImg' : 'cancel.png',
'auto'      : true,
'folder'    : '/uploads'
});
});
// ]]></script>

Esta demás decir que debemos verificar bien las rutas de los archivos y el id de nuestro input file. Lo que allí especificamos en la ruta de nuestro archivo .swf que se encuentra en el ejemplo que acompaña el plugin, el archivo uploadify también esta presente aunque luego explicaré como hacer más cosas con este.

Ahora vamos a las dudas:

¿Cómo hago para que muestre una respuesta una vez subido el archivo?

Este plugin incluye algunos eventos que nos permite ejecutar un procedimiento cuando se completa la carga.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    $('#fileInput').uploadify({
        'uploader'  : 'uploadify.swf',
        'script'    : 'uploadify.php',
        'cancelImg' : 'cancel.png',
        'auto'      : true,
        'folder'    : 'uploads',
        'onComplete': function(event, queueID, fileObj, response, data) {
                    alert("Se subió satisfactoriamente");
            $('#midiv').append("Se subió correctamente");
        }
    });
});
// ]]>
</script>

En el ejemplo estoy usando un alert y a continuación un append para que muestre un mensaje dentro del div con id “midiv”, puedo colocar animaciones o lo que se me ocurra siempre y cuando este dentro de la función onComplete.

¿Cómo hago que se grabe en una base de datos y que PHP genere una respuesta?

Esta demás decir que el proceso depende de la estructura de tu base de datos sin embargo puedo dar algunas pistas, nuestro archivo uploadify necesita una estructura como esta:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
if (!empty($_FILES)) {
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $file_name = $_FILES['Filedata']['name'];  
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
    $targetFile =  str_replace('//','/',$targetPath) . $file_name; 
    if (move_uploaded_file($tempFile,$targetFile)){
                // Aqui escribiriamos toda la conexion de base de datos
                //  Y ejecutariamos una consulta tipo INSERT INTO mitabla (micampo) VALUES ($file_name);
        echo 'Tu archivo se subió correctamente';
    } else {
        echo 'Tu archivo falló';
    }
}
?>

Si se fijan en el ejemplo he colocado un echo indicando que se subió correctamente y otro con el error, para mostrarlos en nuestro javascript debería quedar así:

1
2
3
'onComplete': function(event, queueID, fileObj, response, data) {
            $('#fotosWrapper').append(response);
        }

Donde response es justamente el valor de ese “echo”

¿Cómo envio más parámetros y no solo la imagen?

Suponiendo que queremos enviar un campo de texto con id “mitexto” (si necesitas enviar más los separas por comas)

1
<input type="text" name="mitexto" id="mitexto" size="30" />

Basta con capturar su valor, quedando algo asi ese parametro adicional:

1
'scriptData' : {'texto': $("#mitexto").val()},

Y capturariamos su valor en PHP con algo como:

1
echo $_POST['texto'];

Fijense bien en el nombre que toma la variable

Finalmente pueden descargar los archivos de este tutorial AQUI

]]> http://www.miguelmanchego.com/2010/jquery-subir-archivos-usando-ajax/feed/ 23 Filemanager para CKEditor 3.2.1 http://www.miguelmanchego.com/2010/filemanager-para-ckeditor-3-2-1/ http://www.miguelmanchego.com/2010/filemanager-para-ckeditor-3-2-1/#comments Sun, 11 Apr 2010 05:24:06 +0000 admin http://www.miguelmanchego.com/?p=775

El pequeño administrador de archivos que hice, no funcionaba con esta nueva versión de CKEditor, debido a un pequeñisimo cambio ahora pueden descargar la solución a dicho bug. Dentro de la carpeta ckeditor que esta en blanco deben colocar el editor.

Updated version of filemanager to work with 3.2.1 CKEditor, download and extract ckeditor y folder “CKEditor”

Filemanager CKEditor 3.2.1 (901) ]]> http://www.miguelmanchego.com/2010/filemanager-para-ckeditor-3-2-1/feed/ 13 Filemanager para NicEdit 0.9 http://www.miguelmanchego.com/2009/filemanager-para-nicedit-09/ http://www.miguelmanchego.com/2009/filemanager-para-nicedit-09/#comments Thu, 08 Jan 2009 20:50:38 +0000 admin http://www.miguelmanchego.com/?p=122

NicEdit es un pequeño pero muy potente editor WYSIWYG, pero le faltaba una herramienta muy util como es un administrador de archivos que además incluya la capacidad de subir archivos, es por eso que he programado este pequeño administrador de archivos ahora actualizado para funcionar en la versión 0.9 r23

nicedit-filemanager

Configura filemanager

Antes de usar este administrador de archivos para nicedit, primero edita este archivo:
filemanager/confic.inc.php

Para indicar la ruta donde estan tus imagenes:
Path Relativo: ../../userfiles/
Path Absoluto: http://www.mydomain.com

Para sitios en internet es mucho mejor que definas un path absoluto
Verifica que la carpeta con tus imagenes sea escribible

How to configure filemanager?

Before use filemanager in your server, first edit this file:
filemanager/confic.inc.php

To set set your folder path
Relative Path: ../../userfiles/
Absolute Path: http://www.mydomain.com

For sites in internet is much better use Absolute Path
Verify that your folder to upload pictures is writable

Descarga Aqui
Download Here

]]> http://www.miguelmanchego.com/2009/filemanager-para-nicedit-09/feed/ 2