Come eseguire il caricamento file asincrono (AJAX) utilizzando iframe?

Question

Sto provando a fare il caricamento di un file jax. Ho letto che non è possibile farlo senza usare iframe.
ho scritto:

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

e tramite il modulo plugin jQuery:

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

Il Risultato:

il file è stato caricato con successo e posso vedere il file caricato, ma una finestra compare la casella:

dal rimando risultato JSON per visualizzare il nome del file + formato ecc ..

La mia domanda: Come posso usare l'iFrame per essere in grado di fare "caricamento di file Ajax".

Nota:

1. io non preferisco usare speciale plugin per caricare file, se non v'è più appropriato/soluzioni più semplici.
2. Io uso jsp/servlet come linguaggio lato server .. ma penso che non abbia senso quale lingua io uso.

Grazie

Answer 1

io rispondere alla mia domanda, credo di aver trovato la soluzione. Questi sono i passi che ho seguito per raggiungere l'obiettivo:

1. Effettuare l'attributo "bersaglio" del modulo punto a "iframe".
2. Utilizzare una richiesta HTML normale (non richiesta Asincrona/Ajax) per inviare il modulo.
3. Poiché il frame di destinazione è iframe, l'intera pagina non verrà aggiornata, solo l'iframe.
4. Una volta che l'evento iframe onload si verifica (acquisire quell'evento utilizzando Javascript), quindi eseguire ciò che si desidera, ad es. Puoi inviare una richiesta per elencare le informazioni recenti sui file caricati.

Il codice finale è simile al seguente:

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

Questo esempio tratto dalla BugKiller.esempio di lavoro completo, che permette di caricare un logo e vedere immediatamente nella pagina html, a seguito della quale il valore di upload viene cancellata:

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

Upload codice gestore dietro (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(); 
      } 
     } 
}