¿Cómo hacer carga de archivos asíncrona (AJAX) usando iframe?

Estoy tratando de hacer una carga de archivos ajax. Leí que no es posible hacer eso sin usar iframe .
Escribí :

  
File:

y usando el complemento de formulario jquery:

 $('#myForm').ajaxForm({ dataType: 'json', success: function(data){ alert(data.toSource()); } }); 

El resultado :

el archivo se cargó correctamente y puedo ver el archivo cargado, pero aparece un cuadro de diálogo:

texto alternativo

ya que devuelvo un resultado json para mostrar el nombre del archivo + tamaño, etc.

Mi pregunta: ¿Cómo puedo usar iFrame para poder hacer “carga de archivos ajax”?

Nota:

  1. No prefiero usar un complemento especial para cargar archivos, si hay soluciones más apropiadas / más fáciles.
  2. Yo uso jsp / servlets como un lenguaje del lado del servidor … pero creo que no tiene sentido qué idioma utilizo.

Gracias

Responderé a mi pregunta, creo que encontré la solución. Estos son los pasos que seguí para lograr el objective:

  1. Haga que el atributo ” objective ” del punto de formulario seaiframe “.
  2. Use una solicitud HTML normal (no solicitud Asíncrona / Ajax) para enviar el formulario.
  3. Como el marco objective es iframe, no se actualizará toda la página, solo el iframe.
  4. Una vez que ocurre el evento de iframe onload (captura ese evento usando Javascript) luego haz lo que quieras, por ejemplo, puedes enviar una solicitud para listar la información del archivo cargado recientemente.

El código final se ve así:

    
File:

javascript:

 $("iframe").load(function(){ // ok , now you know that the file is uploaded , you can do what you want , for example tell the user that the file is uploaded alert("The file is uploaded"); // or you can has your own technique to display the uploaded file name + id ? $.post('http://example.com/file-upload-service?do=getLastFile',null,function(attachment){ // add the last uploaded file , so the user can see the uploaded files $("#ajaxResultTest").append("

" + attachment.name + ":" + attachment.id "

"); },'json'); });

Este ejemplo tomado de BugKiller. ejemplo de trabajo completo que le permite cargar un logotipo y verlo inmediatamente en la página html, luego de lo cual se borra el valor de carga:

html:

 

javascript:

 $(document).ready(function () { var companynumber = '12345'; //get this from the database var logoUploadUrl = 'UploadHandler.aspx?logoupload=true&companynumber=' + companynumber ; $("#uploadForm").attr("action", logoUploadUrl); $("#uploadTrg").load(function () { //upload complete //only way to reset contents of file upload control is to recreate it $("#fileUploadWrapper").html(''); //reload the logo url, add ticks on the end so browser reloads it var ticks = ((new Date().getTime() * 10000) + 621355968000000000); var logoUrl = 'images/clients/' + companynumber + '/client.gif?' + ticks; $("#imgLogo").attr('src', logoUrl); }); }); 

cargar el código del manejador detrás (C #):

 namespace MyWebApp { public partial class UploadHandler : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Request.Params["logoupload"] != null) { string companynumber = Request.Params["companynumber"]; string savePath = Server.MapPath("\\images") + "\\clients\\" + companynumber + "\\client.gif"; if (File.Exists(savePath)) File.Delete(savePath); //save the file to the server Request.Files[0].SaveAs(savePath); Response.Write("OK"); Response.Flush(); Response.End(); } } }