jquery - varias - manejo de iframes

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

Question

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

<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 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:

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

Answer 1

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:

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

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

Answer 2

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

1. Haga que el atributo " objetivo " del punto de formulario sea " iframe ".
2. Use 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 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í:

    <!-- 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'');
});