Come rendere il caricamento di file asincrono (AJAX) utilizzando iframe?

Sto cercando di fare il caricamento di un file jax. Ho letto che non è ansible farlo senza utilizzare iframe .
Scrissi :

  
File:

e usando il plugin per moduli jquery:

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

Il risultato :

il file viene caricato correttamente e posso vedere il file caricato, ma appare una finestra di dialogo:

alt text

poiché invio un risultato JSON per visualizzare il nome del file + la dimensione ecc.

La mia domanda: come posso usare l’iFrame per poter fare “upload di file ajax”.

Nota:

  1. Non preferisco usare plugin speciali per caricare file, se ci sono soluzioni più appropriate / più facili.
  2. Io uso jsp / servlet come linguaggio lato server … ma penso che non abbia senso quale linguaggio io usi.

Grazie

Risponderò alla mia domanda, penso di aver trovato la soluzione. Questi sono i passi che ho seguito per raggiungere l’objective:

  1. Rendi l’attributo ” target ” del punto del form su ” iframe “.
  2. Utilizzare una normale richiesta HTML (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 onload dell’iframe si verifica (acquisisci quell’evento usando Javascript), fai ciò che vuoi, ad esempio puoi inviare una richiesta per elencare le informazioni recenti sul file caricato.

Il codice finale assomiglia a questo:

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

Questo esempio tratto da BugKiller. completo esempio di lavoro che ti permette di caricare un logo e vederlo immediatamente nella pagina html, dopo il quale il valore di caricamento viene cancellato:

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

caricare il codice del 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(); } } }