Plugin para jquery con el cual podremos subir todo tipo de archivos a nuestro servidor. No necesita Flash.
En el html:
<html>
<head>
<script language="javascript" src="js/jquery-1.3.1.min.js"></script>
<script language="javascript" src="js/AjaxUpload.2.0.min.js"></script>
<script language="javascript">
$(document).ready(function(){
var button = $('#upload_button'), interval;
new AjaxUpload('#upload_button', {
action: 'upload.php',
onSubmit : function(file , ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extensiones permitidas
alert('Error: Solo se permiten imagenes');
// cancela upload
return false;
} else {
Cambio el texto del boton y lo deshabilito
button.text('Uploading');
this.disable();
}
},
onComplete: function(file, response){
button.text('Upload');
// habilito upload button
this.enable();
// Agrega archivo a la lista
$('#lista').appendTo('.files').text(file);
}
});
});
</script>
</head>
<body>
<div id="upload_button">Upload</div>
<ul id="lista">
</ul>
</body>
</html>
En el CSS:
#upload_button {
width:120px;
height:35px;
text-align:center;
background-image:url(../img/botons/boton.png);
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
padding-top:15px;
margin:0px;
cursor:pointer;
}
#upload_button:hover{
color:#FFFFFF;
}
El archivo PHP que se encarga de guardar el archivo en el servidor:
// defino la carpeta para subir
$uploaddir = 'uploads/';
// defino el nombre del archivo
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
// Lo mueve a la carpeta elegida
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo "success";
} else {
echo "error";
}
