Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Como subir imagen con ajax y php


Ejemplo sencillo de como subir una imagen utilizando ajax y php, se trata de una función que se ejecuta al seleccionar un archivo y lo envía a un fichero php que se encarga de guardar la imagen en el servidor.

index(.php o .html o .x)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function upload_img(){

	var formData = new FormData($("#formUpload")[0]);
	$.ajax({
	type: 'POST',
	url: 'subida.php',
	data: formData,
	contentType: false,
	processData: false
	});

}
</script>

<form onsubmit="return false" class="oculto" method="post" enctype="multipart/form-data" id="formUpload">
	<input type="file" name="image" onchange="upload_img();">
</form>
subida.php
<?php 
if (isset($_FILES['image'])) {
	move_uploaded_file($_FILES['image']['tmp_name'], $_FILES['image']['name']);
}
?>
Cualquier duda comentar ;)
Editado
4
Puntos
5
Resp
3971
Visitas
Por alber hace 28 meses
Administrador offline

Respuesta #1

muy buen aporte :)
1
Puntos
Por pablo hace 28 meses
Experto offline

Respuesta #2

Muchisimas gracias.... Sólo una pregunta. Utilizaré este código para cambiar el background de un div, dejando una ruta fija con un nombre de archivo fijo. Ejemplo: background-image: url("imagenes/fondo.jpg");

Si quiero que un cliente cambie mediante este código la imagen, pero que no necesite hacer nada más... Cómo podría implementar la función de autorenombrado para que suba la que suba se guarde como fondo.jpg????

ME está matando este tema y necesitaría ayuda. Gracias.-
0
Puntos
Por Papiro hace 16 meses
Principiante offline

Respuesta #3

y si quiero que suba sierta cantidad de fotos , por ejemplo solo 4 como hago?
1
Puntos
Por fernandoury hace 16 meses
Principiante offline Sitio web
0
Puntos
Por alber hace 16 meses
Administrador offline

Respuesta #5

para enviar el Form que contiene mas informacion y una imagen hay que por obligacion utilizar este codigo en la funcion para enviar los datos.
var formData = new FormData($("#formUpload")[0]);
o se puede
var formData = $('#formUpload').serialize();
0
Puntos
Por Juliethsanches hace 15 meses
Principiante offline

Relaccionados

Para comentar Inicia sesión o Registrate