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
4607
Visitas
5
Resp
Por alber hace 31 meses
Administrador

Respuesta #1

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

Respuesta #2

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

Respuesta #3

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 20 meses
Principiante
0
Puntos
Por alber hace 19 meses
Administrador

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 18 meses
Principiante

Relaccionados

Para comentar Inicia sesión o Registrate