javascript - example - jQuery Ajax File Upload
upload file ajax php (20)
¿Puedo usar el siguiente código jQuery para realizar la carga de archivos usando el método de publicación de una solicitud Ajax?
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert(''success'');
return false;
}
});
Si es posible, ¿necesito completar la parte de "datos"? ¿Es la forma correcta? Solo publico el archivo en el lado del servidor.
He estado buscando en Google, pero lo que encontré fue un complemento, mientras que en mi plan no quiero usarlo. Al menos por el momento.
Ajax post y subir archivos es posible. Estoy usando la función jQuery $.ajax para cargar mis archivos. Intenté usar el objeto XHR pero no pude obtener resultados en el lado del servidor con PHP.
var formData = new FormData();
formData.append(''file'', $(''#file'')[0].files[0]);
$.ajax({
url : ''upload.php'',
type : ''POST'',
data : formData,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success : function(data) {
console.log(data);
alert(data);
}
});
Como puede ver, debe crear un objeto FormData, vacío o desde (serializado? - $(''#yourForm'').serialize()) formulario existente, y luego adjuntar el archivo de entrada.
Aquí hay más información: - Cómo cargar un archivo usando jQuery.ajax y FormData - Cargando archivos a través de jQuery, se proporciona el objeto FormData y no hay nombre de archivo, solicitud GET
Para el proceso PHP puedes usar algo como esto:
//print_r($_FILES);
$fileName = $_FILES[''file''][''name''];
$fileType = $_FILES[''file''][''type''];
$fileError = $_FILES[''file''][''error''];
$fileContent = file_get_contents($_FILES[''file''][''tmp_name'']);
if($fileError == UPLOAD_ERR_OK){
//Processes your file here
}else{
switch($fileError){
case UPLOAD_ERR_INI_SIZE:
$message = ''Error al intentar subir un archivo que excede el tamaño permitido.'';
break;
case UPLOAD_ERR_FORM_SIZE:
$message = ''Error al intentar subir un archivo que excede el tamaño permitido.'';
break;
case UPLOAD_ERR_PARTIAL:
$message = ''Error: no terminó la acción de subir el archivo.'';
break;
case UPLOAD_ERR_NO_FILE:
$message = ''Error: ningún archivo fue subido.'';
break;
case UPLOAD_ERR_NO_TMP_DIR:
$message = ''Error: servidor no configurado para carga de archivos.'';
break;
case UPLOAD_ERR_CANT_WRITE:
$message= ''Error: posible falla al grabar el archivo.'';
break;
case UPLOAD_ERR_EXTENSION:
$message = ''Error: carga de archivo no completada.'';
break;
default: $message = ''Error: carga de archivo no completada.'';
break;
}
echo json_encode(array(
''error'' => true,
''message'' => $message
));
}
Aquí estaba una idea que estaba pensando:
Have an iframe on page and have a referencer.
Tiene un formulario en el que mueve el elemento ENTRADA: Archivo a.
Form: A processing page AND a target of the FRAME.
El resultado se publicará en el marco, y luego puede enviar los datos obtenidos a un nivel superior a la etiqueta de imagen que desee con algo como:
data:image/png;base64,asdfasdfasdfasdfa
y la página se carga.
Creo que funciona para mí, y dependiendo de ti podrías hacer algo como:
.aftersubmit(function(){
stopPropigation()// or some other code which would prevent a refresh.
});
En caso de que quieras hacerlo así:
$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
if( progressEvent.lengthComputable) {
var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + ''%'';
if( upload) {
console.log( percent + '' uploaded'');
} else {
console.log( percent + '' downloaded'');
}
}
})
.done( function() {
console.log( ''Finished upload'');
});
que
https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js
Podría ser tu solución.
Estoy bastante tarde para esto, pero estaba buscando una solución de carga de imágenes basada en ajax y la respuesta que estaba buscando estaba un poco dispersa a lo largo de esta publicación. La solución que resolví involucró el objeto FormData. Monté una forma básica del código que armé. Puede ver que muestra cómo agregar un campo personalizado al formulario con fd.append (), así como cómo manejar los datos de respuesta cuando se realiza la solicitud de ajax.
Subir html:
<!DOCTYPE html>
<html>
<head>
<title>Image Upload Form</title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function submitForm() {
console.log("submit event");
var fd = new FormData(document.getElementById("fileinfo"));
fd.append("label", "WEBUPLOAD");
$.ajax({
url: "upload.php",
type: "POST",
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function( data ) {
console.log("PHP Output:");
console.log( data );
});
return false;
}
</script>
</head>
<body>
<form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
<label>Select a file:</label><br>
<input type="file" name="file" required />
<input type="submit" value="Upload" />
</form>
<div id="output"></div>
</body>
</html>
En caso de que esté trabajando con php, aquí hay una manera de manejar la carga que incluye el uso de los dos campos personalizados que se muestran en el html anterior.
Upload.php
<?php
if ($_POST["label"]) {
$label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
} else {
$filename = $label.$_FILES["file"]["name"];
echo "Upload: " . $_FILES["file"]["name"] . "<br>";
echo "Type: " . $_FILES["file"]["type"] . "<br>";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";
if (file_exists("uploads/" . $filename)) {
echo $filename . " already exists. ";
} else {
move_uploaded_file($_FILES["file"]["tmp_name"],
"uploads/" . $filename);
echo "Stored in: " . "uploads/" . $filename;
}
}
} else {
echo "Invalid file";
}
?>
Formulario de carga simple
<script>
//form Submit
$("form").submit(function(evt){
evt.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: ''fileUpload'',
type: ''POST'',
data: formData,
async: false,
cache: false,
contentType: false,
enctype: ''multipart/form-data'',
processData: false,
success: function (response) {
alert(response);
}
});
return false;
});
</script>
<!--Upload Form-->
<form>
<table>
<tr>
<td colspan="2">File Upload</td>
</tr>
<tr>
<th>Select File </th>
<td><input id="csv" name="csv" type="file" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="submit"/>
</td>
</tr>
</table>
</form>
He implementado una selección de múltiples archivos con vista previa instantánea y carga después de eliminar los archivos no deseados de la vista previa a través de ajax.
La documentación detallada se puede encontrar aquí: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html
Demostración: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/
jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/
Javascript:
$(document).ready(function(){
$(''form'').submit(function(ev){
$(''.overlay'').show();
$(window).scrollTop(0);
return upload_images_selected(ev, ev.target);
})
})
function add_new_file_uploader(addBtn) {
var currentRow = $(addBtn).parent().parent();
var newRow = $(currentRow).clone();
$(newRow).find(''.previewImage, .imagePreviewTable'').hide();
$(newRow).find(''.removeButton'').show();
$(newRow).find(''table.imagePreviewTable'').find(''tr'').remove();
$(newRow).find(''input.multipleImageFileInput'').val('''');
$(addBtn).parent().parent().parent().append(newRow);
}
function remove_file_uploader(removeBtn) {
$(removeBtn).parent().parent().remove();
}
function show_image_preview(file_selector) {
//files selected using current file selector
var files = file_selector.files;
//Container of image previews
var imageContainer = $(file_selector).next(''table.imagePreviewTable'');
//Number of images selected
var number_of_images = files.length;
//Build image preview row
var imagePreviewRow = $(''<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>'' +
''<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>'' +
''</tr> '');
//Add image preview row
$(imageContainer).html(imagePreviewRow);
if (number_of_images > 1) {
for (var i =1; i<number_of_images; i++) {
/**
*Generate class name of the respective image container appending index of selected images,
*sothat we can match images selected and the one which is previewed
*/
var newImagePreviewRow = $(imagePreviewRow).clone().removeClass(''imagePreviewRow_0'').addClass(''imagePreviewRow_''+i);
$(newImagePreviewRow).find(''input[type="button"]'').attr(''imageIndex'', i);
$(imageContainer).append(newImagePreviewRow);
}
}
for (var i = 0; i < files.length; i++) {
var file = files[i];
/**
* Allow only images
*/
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
/**
* Create an image dom object dynamically
*/
var img = document.createElement("img");
/**
* Get preview area of the image
*/
var preview = $(imageContainer).find(''tr.imagePreviewRow_''+i).find(''td:first'');
/**
* Append preview of selected image to the corresponding container
*/
preview.append(img);
/**
* Set style of appended preview(Can be done via css also)
*/
preview.find(''img'').addClass(''previewImage'').css({''max-width'': ''500px'', ''max-height'': ''500px''});
/**
* Initialize file reader
*/
var reader = new FileReader();
/**
* Onload event of file reader assign target image to the preview
*/
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
/**
* Initiate read
*/
reader.readAsDataURL(file);
}
/**
* Show preview
*/
$(imageContainer).show();
}
function remove_selected_image(close_button)
{
/**
* Remove this image from preview
*/
var imageIndex = $(close_button).attr(''imageindex'');
$(close_button).parents(''.imagePreviewRow_'' + imageIndex).remove();
}
function upload_images_selected(event, formObj)
{
event.preventDefault();
//Get number of images
var imageCount = $(''.previewImage'').length;
//Get all multi select inputs
var fileInputs = document.querySelectorAll(''.multipleImageFileInput'');
//Url where the image is to be uploaded
var url= "/upload-directory/";
//Get number of inputs
var number_of_inputs = $(fileInputs).length;
var inputCount = 0;
//Iterate through each file selector input
$(fileInputs).each(function(index, input){
fileList = input.files;
// Create a new FormData object.
var formData = new FormData();
//Extra parameters can be added to the form data object
formData.append(''bulk_upload'', ''1'');
formData.append(''username'', $(''input[name="username"]'').val());
//Iterate throug each images selected by each file selector and find if the image is present in the preview
for (var i = 0; i < fileList.length; i++) {
if ($(input).next(''.imagePreviewTable'').find(''.imagePreviewRow_''+i).length != 0) {
var file = fileList[i];
// Check the file type.
if (!file.type.match(''image.*'')) {
continue;
}
// Add the file to the request.
formData.append(''image_uploader_multiple['' +(inputCount++)+ '']'', file, file.name);
}
}
// Set up the request.
var xhr = new XMLHttpRequest();
xhr.open(''POST'', url, true);
xhr.onload = function () {
if (xhr.status === 200) {
var jsonResponse = JSON.parse(xhr.responseText);
if (jsonResponse.status == 1) {
$(jsonResponse.file_info).each(function(){
//Iterate through response and find data corresponding to each file uploaded
var uploaded_file_name = this.original;
var saved_file_name = this.target;
var file_name_input = ''<input type="hidden" class="image_name" name="image_names[]" value="'' +saved_file_name+ ''" />'';
file_info_container.append(file_name_input);
imageCount--;
})
//Decrement count of inputs to find all images selected by all multi select are uploaded
number_of_inputs--;
if(number_of_inputs == 0) {
//All images selected by each file selector is uploaded
//Do necessary acteion post upload
$(''.overlay'').hide();
}
} else {
if (typeof jsonResponse.error_field_name != ''undefined'') {
//Do appropriate error action
} else {
alert(jsonResponse.message);
}
$(''.overlay'').hide();
event.preventDefault();
return false;
}
} else {
/*alert(''Something went wrong!'');*/
$(''.overlay'').hide();
event.preventDefault();
}
};
xhr.send(formData);
})
return false;
}
He manejado estos en un simple código. Puedes descargar una demo en funcionamiento desde here
Para tu caso, estas muy posibles. Le explicaré paso a paso cómo puede cargar un archivo en el servidor utilizando AJAX jquery.
Primero, creamos un archivo HTML para agregar el siguiente elemento de archivo de formulario como se muestra a continuación.
<form action="" id="formContent" method="post" enctype="multipart/form-data" >
<input type="file" name="file" required id="upload">
<button class="submitI" >Upload Image</button>
</form>
En segundo lugar, cree un archivo jquery.js y agregue el siguiente código para manejar nuestro envío de archivos al servidor
$("#formContent").submit(function(e){
e.preventDefault();
var formdata = new FormData(this);
$.ajax({
url: "ajax_upload_image.php",
type: "POST",
data: formdata,
mimeTypes:"multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function(){
alert("file successfully submitted");
},error: function(){
alert("okey");
}
});
});
});
Ahí estás hecho. here
Iframes ya no es necesario para cargar archivos a través de ajax. Recientemente lo he hecho por mí mismo. Echa un vistazo a estas páginas:
Usando cargas de archivos HTML5 con AJAX y jQuery
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
Actualicé la respuesta y la limpié. Use la función getSize para verificar el tamaño o use la función getType para verificar los tipos. Agregado el código de la barra de progreso y el código css
var Upload = function (file) {
this.file = file;
};
Upload.prototype.getType = function() {
return this.file.type;
};
Upload.prototype.getSize = function() {
return this.file.size;
};
Upload.prototype.getName = function() {
return this.file.name;
};
Upload.prototype.doUpload = function () {
var that = this;
var formData = new FormData();
// add assoc key values, this will be posts values
formData.append("file", this.file, this.getName());
formData.append("upload_file", true);
$.ajax({
type: "POST",
url: "script",
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener(''progress'', that.progressHandling, false);
}
return myXhr;
},
success: function (data) {
// your callback here
},
error: function (error) {
// handle error
},
async: true,
data: formData,
cache: false,
contentType: false,
processData: false,
timeout: 60000
});
};
Upload.prototype.progressHandling = function (event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
var progress_bar_id = "#progress-wrp";
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
// update progressbars classes so it fits your code
$(progress_bar_id + " .progress-bar").css("width", +percent + "%");
$(progress_bar_id + " .status").text(percent + "%");
};
Cómo usar la clase Upload
//Change id to your id
$("#ingredient_file").on("change", function (e) {
var file = $(this)[0].files[0];
var upload = new Upload(file);
// maby check size or type here with upload.getSize() and upload.getType()
// execute upload
upload.doUpload();
});
Código html de la barra de progreso
<div id="progress-wrp">
<div class="progress-bar"></div>
<div class="status">0%</div>
</div>
Progressbar css code
#progress-wrp {
border: 1px solid #0099CC;
padding: 1px;
position: relative;
height: 30px;
border-radius: 3px;
margin: 10px;
text-align: left;
background: #fff;
box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar {
height: 100%;
border-radius: 3px;
background-color: #f39ac7;
width: 0;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status {
top: 3px;
left: 50%;
position: absolute;
display: inline-block;
color: #000000;
}
Para obtener todas las entradas del formulario, incluido el tipo = "archivo" , debe usar el objeto FormData . Podrá ver el contenido de formData en el depurador -> red -> Encabezados después de enviar el formulario.
var url = "YOUR_URL";
var form = $(''#YOUR_FORM_ID'')[0];
var formData = new FormData(form);
$.ajax(url, {
method: ''post'',
processData: false,
contentType: false,
data: formData
}).done(function(data){
if (data.success){
alert("Files uploaded");
} else {
alert("Error while uploading the files");
}
}).fail(function(data){
console.log(data);
alert("Error while uploading the files");
});
Puede usar el método ajaxSubmit como sigue :) cuando selecciona un archivo que necesita cargar en el servidor, el formulario debe enviarse al servidor :)
$(document).ready(function () {
var options = {
target: ''#output'', // target element(s) to be updated with server response
timeout: 30000,
error: function (jqXHR, textStatus) {
$(''#output'').html(''have any error'');
return false;
}
},
success: afterSuccess, // post-submit callback
resetForm: true
// reset the form after successful submit
};
$(''#idOfInputFile'').on(''change'', function () {
$(''#idOfForm'').ajaxSubmit(options);
// always return false to prevent standard browser submit and page navigation
return false;
});
});
Sí, puedes usar javascript para obtener el archivo, asegurándote de leer el archivo como una URL de datos. Analice las cosas antes de base64 para obtener realmente los datos codificados de base 64 y luego, si está usando php o realmente cualquier otro lenguaje de fondo, puede descodificar los datos de base 64 y guardarlos en un archivo como el que se muestra a continuación.
Javascript:
var reader = new FileReader();
reader.onloadend = function ()
{
dataToBeSent = reader.result.split("base64,")[1];
$.post(url, {data:dataToBeSent});
}
reader.readAsDataURL(this.files[0]);
PHP:
file_put_contents(''my.pdf'', base64_decode($_POST["data"]));
Por supuesto, probablemente querrá hacer una validación como verificar con qué tipo de archivo está tratando y cosas así, pero esta es la idea.
Si desea cargar un archivo usando AJAX, aquí hay un código que puede usar para subir archivos.
$(document).ready(function() {
var options = {
beforeSubmit: showRequest,
success: showResponse,
dataType: ''json''
};
$(''body'').delegate(''#image'',''change'', function(){
$(''#upload'').ajaxForm(options).submit();
});
});
function showRequest(formData, jqForm, options) {
$("#validation-errors").hide().empty();
$("#output").css(''display'',''none'');
return true;
}
function showResponse(response, statusText, xhr, $form) {
if(response.success == false)
{
var arr = response.errors;
$.each(arr, function(index, value)
{
if (value.length != 0)
{
$("#validation-errors").append(''<div class="alert alert-error"><strong>''+ value +''</strong><div>'');
}
});
$("#validation-errors").show();
} else {
$("#output").html("<img src=''"+response.file+"'' />");
$("#output").css(''display'',''block'');
}
}
Aquí está el HTML para subir el archivo
<form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image''" autocomplete="off">
<input type="file" name="image" id="image" />
</form>
Una carga AJAX es de hecho posible con XMLHttpRequest (). No hay marcos necesarios. Se puede mostrar el progreso de la carga.
Para obtener más información, consulte: Responda https://.com/a/4943774/873282 para cuestionar el progreso de carga de jQuery y la carga de archivos AJAX .
Usar FormData es el camino a seguir tal como lo indican muchas respuestas. Aquí hay un poco de código que funciona muy bien para este propósito. También estoy de acuerdo con el comentario de anidar bloques ajax para completar circunstancias complejas. Incluyendo e.PreventDefault (); En mi experiencia, el código es más compatible con varios navegadores.
$(''#UploadB1'').click(function(e){
e.preventDefault();
if (!fileupload.valid()) {
return false;
}
var myformData = new FormData();
myformData.append(''file'', $(''#uploadFile'')[0].files[0]);
$("#UpdateMessage5").html("Uploading file ....");
$("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");
myformData.append(''mode'', ''fileUpload'');
myformData.append(''myid'', $(''#myid'').val());
myformData.append(''type'', $(''#fileType'').val());
//formData.append(''myfile'', file, file.name);
$.ajax({
url: ''include/fetch.php'',
method: ''post'',
processData: false,
contentType: false,
cache: false,
data: myformData,
enctype: ''multipart/form-data'',
success: function(response){
$("#UpdateMessage5").html(response); //.delay(2000).hide(1);
$("#UpdateMessage5").css("background","");
console.log("file successfully submitted");
},error: function(){
console.log("not okay");
}
});
});
la carga de archivos no es posible a través de ajax. Puedes subir un archivo, sin actualizar la página usando IFrame. Puedes consultar más detalles here
ACTUALIZAR:
Con XHR2, se admite la carga de archivos a través de AJAX. Por ejemplo, a través del objeto FormData , pero desafortunadamente no es compatible con todos / los navegadores antiguos.
La compatibilidad con FormData comienza a partir de las siguientes versiones de los navegadores de escritorio. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
Para más detalles, ver enlace MDN
para cargar un archivo que es enviado por el usuario como parte de un formulario usando jquery, siga el siguiente código:
var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);
Luego envíe el objeto de datos del formulario al servidor.
También podemos agregar un archivo o un blob directamente al objeto FormData.
data.append("myfile", myBlob, "filename.txt");
$("#submit_car").click( function() {
var formData = new FormData($(''#car_cost_form'')[0]);
$.ajax({
url: ''car_costs.php'',
data: formData,
async: false,
contentType: false,
processData: false,
cache: false,
type: ''POST'',
success: function(data)
{
},
}) return false;
});
editar: anote el tipo de contenido y los datos de proceso. Puede simplemente usar esto para cargar archivos a través de Ajax ... la entrada de envío no puede estar fuera del elemento del formulario
<html>
<head>
<title>Ajax file upload</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function (e) {
$("#uploadimage").on(''submit'', (function(e) {
e.preventDefault();
$.ajax({
url: "upload.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
alert(data);
}
});
}));
</script>
</head>
<body>
<div class="main">
<h1>Ajax Image Upload</h1><br/>
<hr>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="image_preview"><img id="previewing" src="noimage.png" /></div>
<hr id="line">
<div id="selectImage">
<label>Select Your Image</label><br/>
<input type="file" name="file" id="file" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
</div>
</body>
</html>
var dataform = new FormData($("#myform")[0]);
//console.log(dataform);
$.ajax({
url: ''url'',
type: ''POST'',
data: dataform,
async: false,
success: function(res) {
response data;
},
cache: false,
contentType: false,
processData: false
});
- Use un iframe oculto y establezca el destino de su formulario al nombre de ese iframe. De esta manera, cuando se envía el formulario, solo se actualizará el iframe.
- Tener un controlador de eventos registrado para el evento de carga de iframe para analizar la respuesta.
Más detalles en mi blog: http://blog.manki.in/2011/08/ajax-fie-upload.html .