Wie man asynchronen (AJAX) File Upload mit iframe machen?

Question

Ich versuche, Ajax-Datei hochladen. Ich habe gelesen, dass dies ohne die Verwendung von iframe nicht möglich ist.
schrieb ich:

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

und mit Jquery Form Plugin:

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

Das Ergebnis:

die Datei erfolgreich hochgeladen und ich kann die hochgeladene Datei, sondern ein Dialog sehen erscheint:

da ich ein json Ergebnis zurückschicken die Dateinamen anzuzeigen + Größe etc ..

Meine Frage: Wie kann ich die iFrame verwenden zu können „Ajax-Datei-Upload“ zu machen.

Hinweis:

1. Ich ziehe es keine spezielle Plugin zu verwenden Datei zu, wenn es geeignetere/einfache Lösungen ist.
2. Ich benutze Jsp/Servlets als serverseitige Sprache .. aber ich denke, es macht keinen Sinn, welche Sprache ich verwende.

Dank

Answer 1

Ich werde meine Frage beantworten, ich glaube, ich die Lösung gefunden. Dies sind die Schritte, die ich folgte das Ziel zu erreichen:

1. Machen Sie das Attribut „Ziel“ der Form Punkt „iframe“.
2. Verwenden Sie eine normale HTML-Anforderung (keine asynchrone/Ajax-Anforderung), um das Formular zu senden.
3. Da der Zielframe iframe ist, wird die ganze Seite nicht aktualisiert - nur der iframe.
4. Sobald iframe onload Ereignis passiert (erfassen Sie dieses Ereignis mit Javascript) dann tun, was Sie wollen, z. Sie können eine Anfrage senden, um die zuletzt hochgeladenen Dateiinformationen aufzulisten.

Der letzte Code sieht wie folgt aus:

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

Dieses Beispiel aus BugKiller genommen.vollständiges Arbeitsbeispiel, das Sie ein Logo hochladen und es sofort in der HTML-Seite an, nach dem der Upload Wert gelöscht wird:

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