[SOLUCIONADO] Problema al Subir archivo por $.ajax()

nestor_rupay · #1 (**permalink**) 22/04/2013, 19:01

hola amigos. tengo un ejemplo de como subir archivos mediante $.ajax(). el ejemplo funciona.
El detalle es que solo funciona con el input type file.
y necesito tambien agregar un formulario

aqui le dejo el ejemplo. por favor necesito su ayuda.

index.html

Código HTML:

Ver original<!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>Documento sin título</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
function uploadAjax(){
var form = $('#form1').serialize();// 
/*alert('Datos serializados: '+form);*/
var inputFileImage = document.getElementById("archivoImage");
var file = inputFileImage.files[0];
var data = new FormData();
data.append("archivo",file);
var url = "upload.php";
$.post('variables.php', $("#form1").serialize());
    $.ajax({
        url:url,
        type:"POST",
        dataType: 'json',
        contentType:false,
        data:data,//
        processData:false,
        cache:false
    }).done(function(respuesta){
                    alert(respuesta.mensaje);
                    });
 
}
</script>
</head>
<body>
<input type="file" name="archivoImage" id="archivoImage" />
<form name="form1" method="post" action="" id="form1">
<label>NOMBRE:</label><input type="text" name="nombre" id="nom"/><br />
<label>APELLIDOS</label><input type="text" name="apellidos" id="ape"/><br />
 
<input type="button" id="botonSubidor" onclick="uploadAjax();"/>
</form>
 
</body>
</html>

upload.php

Código PHP:

Ver original<?php 
 
$upload_folder ="imagenes";
 
$nombre_archivo = $_FILES["archivo"]["name"];
 
$tipo_archivo = $_FILES["archivo"]["type"];
 
$tamano_archivo = $_FILES["archivo"]["size"];
 
$tmp_archivo = $_FILES["archivo"]["tmp_name"];
 
$archivador = $upload_folder . "/" . $nombre_archivo;
 
move_uploaded_file($tmp_archivo, $archivador);
$respuesta = new stdClass();
$respuesta->mensaje='se subio imagen';
echo json_encode($respuesta); 
?>

nestor_rupay · #2 (**permalink**) 22/04/2013, 20:00

Por fin, di con la solucion.
Para todos los amigos que necesitan un fomulario que permita subir archivos con jquery l la función $.ajax(). aqui la solucion.

index.html

Código HTML:

Ver original<!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>Documento sin título</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
function uploadAjax(){
var data = new FormData($('#form1')[0]);
var url = "upload.php";
    $.ajax({
        url:url,
        type:"POST",
        dataType: 'json',
        contentType:false,
        data:data,
        processData:false,
        cache:false
    }).done(function(respuesta){
                    alert(respuesta.mensaje);
                    });
 
}
</script>
</head>
<body>
<!--<input type="file" name="archivoImage" id="archivoImage" />-->
<form name="form1" method="post" action="" id="form1">
<input type="file" name="archivoImage" id="archivoImage" /><br />
<label>NOMBRE:</label><input type="text" name="nombre" id="nom"/><br />
<label>APELLIDOS</label><input type="text" name="apellidos" id="ape"/><br />
 
<input type="button" id="botonSubidor" onclick="uploadAjax();"/>
</form>
 
</body>
</html>

upload.php

Código PHP:

Ver original<?php 
$upload_folder ="imagenes";
 
$nombre_archivoImage = $_FILES["archivoImage"]["name"];
 
 
$tipo_archivoImage = $_FILES["archivoImage"]["type"];
 
$tamano_archivoImage = $_FILES["archivoImage"]["size"];
 
$tmp_archivoImage = $_FILES["archivoImage"]["tmp_name"];
 
$nom=$_POST['nombre'];
$ape=$_POST['apellidos'];
 
$archivador = $upload_folder . "/" . $nombre_archivoImage;
 
move_uploaded_file($tmp_archivoImage, $archivador);
$respuesta = new stdClass();
$respuesta->mensaje=$nom.' '.$ape.' '.$nombre_archivoImage;
echo json_encode($respuesta); 
?>

David · #3 (**permalink**) 22/04/2013, 20:27

Como nota, es importante tener en cuenta que ese código solo funciona en las versiones más recientes de los navegadores (en Internet Explorer 9, por ejemplo, no funciona)

nestor_rupay · #4 (**permalink**) 22/04/2013, 20:41

hola david
como podria hacer con las versiones anteriores.
me podrias ayudar a solucionar este problema con respecto a las versiones

David · #5 (**permalink**) 22/04/2013, 20:56

Revisa este tema donde tratamos el asunto:
http://www.forosdelweb.com/f179/pasa...e-php-1030451/