AJAX+PHP Image Gallery Uploader

wolf777 · #1 (**permalink**) 17/12/2010, 08:53

Saludos soy nuevo en AJAX, pero conosco batante PHP. Quiero realizar una galeria de imagenes con su uploader en ajax, por la parte del PHP no tengo dificultades pero si en el manejo de AJAX.

Creo que implementarlo mediante ajax cambiaria la estructura del codigo por lo cual solicito si me pudieran ayudar a comprender como podria emplear el AJAX para esto.

Muchas Gracias

wolf777 · #2 (**permalink**) 17/12/2010, 11:00

Bueno ya encontre una aplicacion que me sirvio muchisimo la posteo para la ayuda de quien lo necesite:

index.php

Código PHP:

 
<html> 
    <head> 
        <script type="text/javascript" src="uploader.js" ></script> 
    </head> 
    <body> 
<?php 
        /*require ajax class call*/ 
    require_once("AjaxFileUploader.inc.php"); 
        /*new ajax file uploeader object*/ 
    $ajaxFileUploader = new AjaxFileuploader($uploadDirectory=""); 
        /*upload ajax form elements with diferent id's*/ 
    echo $ajaxFileUploader->showFileUploader('id1'); 
?> 
</body> 
</html>

imageupload.php

Código PHP:

  <?php 
/*dirName main folder file*/ 
$dirName="uploads"; 
/*verify id existence*/ 
if (isset($_POST['id'])) { 
    //$uploadFile=$_GET['dirname']."/".$_FILES[$_POST['id']]['name']; 
    @mkdir($dirName,0777); 
        /*encrypt main name for security measures*/ 
    $uploadFile="$dirName/".md5($_FILES[$_POST['id']]['name']).".jpg"; 
        /*verify directory existence*/ 
    if(!is_dir($_GET['dirname'])) { 
        echo '<script> alert("No se pudo encontrar la direccion de archivo de subida: $dirName);</script>'; 
    } 
        /*verify uploaded file*/ 
    if (!copy($_FILES[$_POST['id']]['tmp_name'], $dirName.'/'.md5($_FILES[$_POST['id']]['name']).".jpg")) { 
        echo '<script> alert("El archivo no pudo subirse");</script>'; 
    } 
} 
else { 
    /*full path*/ 
    $uploadFile="$dirName/".md5($_GET['filename']).".jpg"; 
    if (file_exists($uploadFile)) { 
                /*link image to open image and delete*/ 
        echo "Imagen Subida <a href='$uploadFile'>Open File</a> &nbsp;&nbsp;&nbsp; <a href='deletefile.php?filename=".$uploadFile."'>Delete File</a>"; 
                /*image preview*/ 
                echo "<br><img src='".$uploadFile."' alt='".$uploadFile."' />"; 
    } 
    else { 
                /*preload animated gif*/ 
        echo "<img src='loading.gif' alt='loading...' />"; 
    } 
} 
?>

deletefile.php

Código PHP:

  <?php 
/*delete specific image*/ 
$homepage="index.php"; 
if (isset($_GET['filename'])) {     
    if (unlink($_GET['filename'])) { 
        header("Location: $homepage"); 
    } 
    else { 
        echo "<script type='text/javascript'> alert('Failed to delete: ".$_GET['filename'].". Please try again.');</script>"; 
    } 
} 
else { 
    echo "File deleted"; 
} 
?>

AjaxFileUploader.inc.php

Código PHP:

  <?php 
@session_start(); 
class AjaxFileuploader { 
    // PHP 4.x users replace "PRIVATE" from the following lines with "var". Also remove all the PUBLIC, PRIVATE and PROTECTED Kaywords from the class 
    private $uploadDirectory=''; 
    private $uploaderIdArray=array(); 
 
    /** 
     * Constructor Function 
     */ 
    public function AjaxFileuploader($uploadDirectory) { 
        if (trim($uploadDirectory) != '' && is_dir($uploadDirectory)) { 
            $this->uploadDirectory=trim($uploadDirectory); 
        } 
    } 
 
    /** 
     * This function return all the files in the upload directory, sorted according to their file types 
     */         
    public function getAllUploadedFiles() { 
        $returnArray = array(); 
        $allFiles = $this->scanUploadedDirectory(); 
        return $returnArray; 
    } 
 
    /**  
     * This function scans uploaded directory and returns all the files in it 
     */ 
    private function scanUploadedDirectory() { 
        $returnArray = array(); 
        if ($handle = opendir($this->uploadDirectory)) { 
            while (false !== ($file = readdir($handle))) { 
                if (is_file($this->uploadDirectory."/".$file)) { 
                    $returnArray[] = $file; 
                } 
            } 
            closedir($handle); 
        } 
        else { 
            die("<b>ERROR: </b> Could not read directory: ". $this->uploadDirectory); 
        } 
        return $returnArray; 
    } 
 
    /** 
     * This function returns html code for uploading a file 
     */ 
    public function showFileUploader($uploaderId) { 
        if (in_array($uploaderId, $this->uploaderIdArray)) { 
            die($uploaderId." already used. please choose another id."); 
            return ''; 
        } 
        else { 
            $this->uploaderIdArray[] = $uploaderId; 
            return '<form id="formName'.$uploaderId.'" method="post" enctype="multipart/form-data" action="imageupload.php?dirname='.$this->uploadDirectory.'" target="iframe'.$uploaderId.'"> 
                        <input type="hidden" name="id" value="'.$uploaderId.'" />                             
                        <span id="uploader'.$uploaderId.'" style="font-family:verdana;font-size:10;"> 
                            Imagen: <input name="'.$uploaderId.'" type="file" value="'.$uploaderId.'" onchange=\'return uploadFile(this,"'.$this->uploadDirectory.'")\' /></span> 
                        <span id="loading'.$uploaderId.'"></span>                         
                        <iframe name="iframe'.$uploaderId.'" src="imageupload.php" width="400" height="100" style="display:none"> </iframe> 
                    </form>'; 
        } 
    } 
} 
?>

Importante: necesitan crear un directorio "uploads" que tenga todos los permisos necesarios para poder emplearlo

Saludos a todos y gracias ;)