Este script lo saque de una clase de PHPClass y le hice un par de modificaciones.
Aca dejo el sistema funcionando
http://retrofox.com.ar/ajaxfileuploader/
Consta de 4 Archivos:
la clase
AjaxFileUploader.inc.php Código PHP:
<?php
class AjaxFileuploader {
// PHP 4.x users replace "PRIVATE" from the following lines with VAR
var $uploadDirectory = '';
var $uploaderIdArray = array();
/**
* Constructor Function
*
*/
function AjaxFileuploader($uploadDirectory) {
if (trim($uploadDirectory) != '' && is_dir($uploadDirectory))
$this->uploadDirectory = $uploadDirectory;
else
die("<b>ERROR:</b> No Se puede abrir el directorio: $uploadDirectory");
}
/**
* Metodo que retorna un Array con todos los archivos en el uploadDir
* @return array
*/
function scanDir() {
$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> No se puede leer el directorio <b>". $this->uploadDirectory.'</b>');
}
return $returnArray;
}
/**
* Esta Funcion Retorna el formulario html para subir el archivo al server
* @param string $uploaderId
* @return string
*/
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" target="iframe'.$uploaderId.'">
<input type="hidden" name="id" value="'.$uploaderId.'" />
<span id="uploader'.$uploaderId.'" style="font-family:verdana;font-size:10;">
Upload File: <input name="'.$uploaderId.'" type="file" value="'.$uploaderId.'" onchange="return uploadFile(this)" />
</span>
<iframe name="iframe'.$uploaderId.'" src="imageupload.php" width="400" height="100" style="display:none"> </iframe>
</form>';
}
}
}
?>
Archivo de respuesta a la subida del archivo
imageupload.php Código PHP:
<?php
// Copia el archivo temporal al archivo en el server
// en $dir se especifica directorio de escritura.
$dir = 'archs/';
if (isset($_POST['id'])) {
if (!copy($_FILES[$_POST['id']]['tmp_name'], 'archs/'.$_FILES[$_POST['id']]['name']))
echo '<script> alert("Error al Subir el Archivo");</script>';
}
else
echo "Archivo subido.";
?>
el
index.php Código PHP:
<html>
<head>
<title>AJAX File uploader</title>
<script type="text/javascript" src="uploader.js" ></script>
</head>
<style>
h3 {color: #F00}
p {color: #00F; border: 1px solid #CCC; margin: 2px; padding: 2px;}
</style>
<body>
<?php
// Carpeta donde se guardan los archivos subido
$upDir = "archs/";
// Incluimos Clase
require_once("AjaxFileUploader.inc.php");
// Creamos Objeto
$Archivo = new AjaxFileuploader($upDir);
// Escaneamos los archivos en el servidor
$archs = $Archivo->scanDir();
echo '<h3>Archivos Subidos</h3>';
foreach ($archs as $nombre_archivo)
echo '<p>'.$upDir.'<b>'.$nombre_archivo.'</b></p>';
echo '<br><br><p>Archivos a Subir</p>';
// Formulario de subida 1
echo $Archivo->showFileUploader('id1');
// Formulario de subida 2
echo $Archivo->showFileUploader('id2');
?>
</body>
</html>
Y la rutina JavaScript
uploader.js Código PHP:
var http = createRequestObject();
var uploader = '';
function createRequestObject() {
var obj;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
obj = new XMLHttpRequest();
}
return obj;
}
function traceUpload(uploadDir) {
http.onreadystatechange = handleResponse;
http.open("GET", 'imageupload.php?uploadDir='+uploadDir+'&uploader='+uploader);
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
document.getElementById(uploaderId).innerHTML = http.responseText;
//window.location.reload(true);
}
else {
document.getElementById(uploaderId).innerHTML = "Uploading File. Please wait...";
}
}
function uploadFile(obj) {
var uploadDir = obj.value;
uploaderId = 'uploader'+obj.name;
uploader = obj.name;
document.getElementById('formName'+obj.name).submit();
traceUpload(uploadDir, obj.name);
}
Tambien esta el directorio
archs/ que es donde se suben los archivos.