Как сделать загрузку асинхронного (AJAX) файла с помощью iframe?

Question

Я пытаюсь загрузить файл ajax. Я читал, что это невозможно сделать без использования iframe.
я писал:

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

и с помощью формы JQuery плагин:

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

Результат:

файл успешно загружен и я могу видеть загруженный файл, но диалог появляется поле:

, так как я отправить обратно результат JSON, чтобы отобразить имя + размер файла и т.д. ..

Мой вопрос: Как я могу использовать IFrame, чтобы быть в состоянии сделать «Аякса загрузить файл».

Примечание:

1. Я не предпочитаю использовать специальный плагин для загрузки файла, если есть более целесообразно/легче решения.
2. Я использую jsp/сервлеты как серверный язык .. но я думаю, что не имеет смысла, какой язык я использую.

Благодаря

Answer 1

Я ответил на мой вопрос, я думаю, я нашел решение. Это те шаги, которые я следовать, чтобы достичь цели:

1. Сделать атрибут «целевой» из формы точки к «IFrame».
2. Используйте обычный запрос HTML (не асинхронный/Ajax-запрос), чтобы отправить форму.
3. Поскольку целевой кадр является iframe, вся страница не обновляется - только iframe.
4. После того, как iframe onload Событие (захватить это событие с помощью Javascript), тогда сделайте то, что вы хотите, например. Вы можете отправить запрос на просмотр информации о недавно загруженном файле.

Окончательный код выглядит следующим образом:

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

Этот пример взят из BugKiller.полный рабочий пример, который позволяет загружать логотип и увидеть его сразу на странице HTML, после чего значение загрузки очищается:

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

загрузки код обработчика позади (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(); 
      } 
     } 
}