<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.boton').click(function(){
//información del formulario
var formData = new FormData($(".formulario")[0]);
var message = "";
//hacemos la petición ajax
$.ajax({
url: 'subir.php',
type: 'POST',
// Form data
//datos del formulario
data: formData,
//necesario para subir archivos via ajax
cache: false,
contentType: false,
processData: false,
//una vez finalizado correctamente
success: function(data){
$("#respuesta").html(data);
},
//si ha ocurrido un error
error: function(){
message = $("<span class='error'>Ha ocurrido un error.</span>");
showMessage(message);
}
});
});
});
</script>
<style type="text/css">
.messages{
float: left;
font-family: sans-serif;
display: none;
}
.info{
padding: 10px;
border-radius: 10px;
background: orange;
color: #fff;
font-size: 18px;
text-align: center;
}
.before{
padding: 10px;
border-radius: 10px;
background: blue;
color: #fff;
font-size: 18px;
text-align: center;
}
.success{
padding: 10px;
border-radius: 10px;
background: green;
color: #fff;
font-size: 18px;
text-align: center;
}
.error{
padding: 10px;
border-radius: 10px;
background: red;
color: #fff;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<!--el enctype debe soportar subida de archivos con multipart/form-data-->
<form enctype="multipart/form-data" class="formulario" id="form">
<label>Subir un archivo</label><br />
<input name="imagen" type="file" id="imagen" /><br /><br />
<input type="text" nombre="nombre"value="">
<input type="button" class="boton" value="guardar" /><br />
</form>
<!--div para visualizar mensajes-->
<!--div para visualizar en el caso de imagen-->
<div id="respuesta">kkkk</div>
</body>
</html>
