Utilizar CKfinder para subir archivos

Es muy común tener formularios en nuestras Webs para subir archivos al servidor. Para ello podemos utilizar los típicos mecanismos de subida de archivos que nos proporcionan cada lenguaje de programación (php, asp, etc.).

Otra opción es utilizar CKfinder, aunque esta opción solo es recomendable para aquellos formualrios que esten destinados a administradores de la aplicación que estemos desarrollando, ya que CKfinder nos permitirá navegar por el arbol de directorios de nuestro sitio web, permitirá borrar archivos y otras opciones que no desearemos poner al alcance a un visitante anónimo de nuestra Web.

Si queremos emplear CKfinder para subir archivos a nuestro servidor Web será muy sencillo. Lo primero será incluir el fichero javascript de CKfinder:

<script type="text/javascript" src="ckfinder/ckfinder.js"></script>

A continuación, en nuestro formulario:

<script type="text/javascript">
   function BrowseServer()
  {
          var finder = new CKFinder();
          finder.selectActionFunction = SetFileField;
          finder.popup();
  }
          
  function SetFileField( fileUrl )
  {   
          document.getElementById('fichero').value = fileUrl ;
  }
</script>
<input id="fichero" name="fichero" readonly="readonly" type="text" />
<input  type="button" value="Cargar fichero" onclick="BrowseServer();" />

Al hacer click en el botón de Cargar fichero se llamará a la función BrowseServer(), la cúal abrirá el gestor de archivos de CKfinder. Una vez subido el archivo y seleccionado, mediante la función SetFileField(), nos devolverá a la caja de texto fichero la url del archivo seleccionado. Esta función SetFileField(), la podemos modificar a nuestras necesidades si es presico transformas la url devuelta por CKfinder.

En el post Integrar CKfinder en CKeditor explico como configurar la carpeta donde guarda los archivos CKfinder y como integrarlo con CKeditor.