envio de imagen con ajax

sebacomas · #1 (**permalink**) 10/10/2011, 12:43

Hola, quiero subir una imagen por medio de ajax y jquery, el codigo que hice es el siguiente, que no me funciona para nada, la verdad que no se como hacerlo:

<head>
<script src="jquery161.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">

function datos(){

var subtitulo = $("#subtitulo").val();
var fileToUpload = $("#fileToUpload").val();
url:'_php/proceso-formulario.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
data:{fileToUpload:fileToUploadsubtitulo:subtitulo },
success: function (subtitulo)

}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body>
<form action="#" method="post" enctype="multipart/form-data">
<input type="text" id="subtitulo" />
<input type="file" id="fileToUpload" name="fileToUpload" />
<input type="button" onclick="datos();" value="enviar" />
</form>
</body>
</html>

Cualquier opinión me sirve.
Saludos!

sebacomas · #2 (**permalink**) 10/10/2011, 12:48

El ejemplo de donde lo saque ponia esto:
<html>
<head>
<title>Ajax File Uploader Plugin For Jquery</title>
<link href="ajaxfileupload.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});

$.ajaxFileUpload
(
{
url:'doajaxfileupload.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
data:{name:'logan', id:'id'},
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)

return false;

}
</script>
</head>

<body>
<div id="wrapper">
<div id="content">
<h1>Ajax File Upload Demo</h1>
<p>Jquery File Upload Plugin - upload your files with only one input field</p>
<p>
need any Web-based Information System?<br> Please <a href="http://www.phpletter.com/">Contact Us</a><br>
We are specialized in <br>
<ul>
<li>Website Design</li>
<li>Survey System Creation</li>
<li>E-commerce Site Development</li>
</ul>
<img id="loading" src="loading.gif" style="display:none;">
<form name="form" action="" method="POST" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="tableForm">

<thead>
<tr>
<th>Please select a file and click Upload button</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td> </tr>

</tbody>
<tfoot>
<tr>
<td><button class="button" id="buttonUpload" onClick="return ajaxFileUpload();">Upload</button></td>
</tr>
</tfoot>

</table>
</form>
</div>

</body>
</html>

Artificium · #3 (**permalink**) 10/10/2011, 20:42

Si pretendes hacer una carga de archivo con ajax pues simplemente no se puede, debes usar el truco del iframe oculto. Osea, hace un iframe oculto, basta con ponerle un width y height igual a cero, luego le pones un name y al formulario que usas para enviar la imagen le das un target igual al name del iframe. Cuando la carga se haga con PHP del modo corriente, debes imprimir un código JavaScript que diga que se ha cargado la imagen o que haga alguna otra acción. Ese sería mi consejo. Suerte!

Panino5001 · #4 (**permalink**) 10/10/2011, 23:58

Cita:

Iniciado por Artificium

Si pretendes hacer una carga de archivo con ajax pues simplemente no se puede

Claro que se puede: hay varias técnicas: una, la que expuse aquí donde puede verse que sería sencillo enviar un archivo codificado en base64 vía AJAX. Otras técnicas pueden verse aquí: http://www.profilepicture.co.uk/tuto...quest-level-2/ o aquí:
https://developer.mozilla.org/en/Usi...b_applications

HTML5 llegó para quedarse y ya tiene apoyo en todos los navegadores modernos. Es hora de dejar de decir que estas cosas no pueden hacerse.