Subir avatar a un servidor web

hola les vengo con un nuevo sistema de uplouds file para php y con ajax
es algo mas nuevo no tenes que abir una ventana emergente para cargar el avatar

para descargar el proyecto https://dropbox.com/s/f79rm27duds43ff/uplouds.zip

en el index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX uploader plugin</title>
<meta name="description" content="Demo de uploader ajax, usando un plugin para jquery" />
<meta name="keywords" content="jquery, ajax" />
<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 {
			button.text('Erepera');
			this.disable();
		}
		},
		onComplete: function(file, response){
			button.text('Subir');
			// enable upload button
			this.enable();			
			// Agrega archivo a la lista
			$('#lista').appendTo('.files').text(file);
		}	
	});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="upload_button">subir</div>
<ul id="lista">
</ul>
</body>
</html>

creamos un nuevo archivo llamdo upload.php

<?php
$uploaddir = 'uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  echo "error";
}
?>

creamos una carpeta js

creamos un archivo style.css

/* CSS Document */
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333333;
}
#upload_button {
	width:120px;
	height:35px;
	text-align:center;
	border: 1px solid #3583BE;
	text-shadow: 1px 1px #797979;
	float: left;
	height: 26px;
	line-height: 23px;
	width: 87px;
	cursor: pointer;
	color: #fff;
	background: -webkit-linear-gradient(#2091E7, #3382BE);
	background: -moz-linear-gradient(#2091E7, #3382BE);
	background: -o-linear-gradient(#2091E7, #3382BE);
	outline: none;
	border-radius: 3px;
	
	
}
#upload_button:hover{
	color:#FFFFFF;
}

espere que les sirva para sus proyectos

10
Puntos

2136
Visitas

2
Resp

Por maticapu98 hace 11 años

Novice

Respuesta #1

increíble loco, gracias por el aporte

0
Puntos

Por alber hace 11 años

Admin

Respuesta #2

gracias
Estas muy bueno esta funcion por que no tenes que abir una ventana emergente
es mas practico
Saludos Alber

0
Puntos

Por maticapu98 hace 11 años

Novice