Cómo hacer una carga de archivos asíncrona (AJAX) utilizando iframe?

Question

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

<iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="yes"></iframe> 
<form id="myForm" action="file-component" method="post" enctype="multipart/form-data" target="uploadTrg"> 
File: <input type="file" name="file"> 
<input type="submit" value="Submit" id="submitBtn"/> 
</form> 

y utilizando el formulario jQuery plugin:

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

El resultado:

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

ya que envío hacia atrás resultado JSON para mostrar el nombre + Tamaño de archivo etc ..

Mi Pregunta: ¿Cómo puedo utilizar el marco flotante a ser capaz de hacer "carga de archivos Ajax".

Nota:

1. no prefiero usar plug-in especial para cargar el archivo, si hay más adecuada/soluciones más sencillas.
2. Uso jsp/servlets como un lenguaje del lado del servidor ... pero creo que no tiene sentido qué idioma utilizo.

Gracias

Answer 1

voy a responder a mi pregunta, creo que he encontrado la solución. Estos son los pasos que he seguido para lograr el objetivo:

1. Hacer que el atributo "objetivo" de la forma punto a "iframe".
2. Utilice una solicitud HTML normal (no solicitud Asíncrona/Ajax) para enviar el formulario.
3. Como el marco objetivo es iframe, no se actualizará toda la página, solo el iframe.
4. Una vez iframe onload evento sucede (captura ese evento usando Javascript) luego haz lo que quieras, p. Puede enviar una solicitud para listar la información reciente del archivo cargado.

El código final es el siguiente:

<!-- Attach a file --> 

    <iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="yes"></iframe> 

    <form id="myForm" action="http://example.com/file-upload-service" method="post" enctype="multipart/form-data" target="uploadTrg"> 

     File: <input type="file" name="file"> 
     <input type="submit" value="Submit" id="submitBtn"/> 

    </form> 

    <div id="ajaxResultTest"></div> 

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("<h4>" + attachment.name + ":" + attachment.id "</h4>"); 

    },'json'); 
}); 

Answer 2

Este ejemplo tomado de BugKiller.ejemplo de trabajo completo que le permite cargar un logotipo y lo ve inmediatamente en la página HTML, tras lo cual el valor de carga se limpia:

html:

<form id="uploadForm" method="post" enctype="multipart/form-data" target="uploadTrg"> 
    <div id="fileUploadWrapper"><input type="file" name="file" id="fileUpload"></div> 
    <input type="submit" value="Upload" id="submitBtn"/> 
</form> 
<iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="no" style="display:none"></iframe> 
<img id="imgLogo" style="border-width:0px;" /> 

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('<input type="file" name="file" id="fileUpload">'); 

    //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); 
    }); 
}); 

carga controlador de código 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(); 
      } 
     } 
}