如何使用iframe来进行异步（AJAX）文件上传？ [英] How to make Asynchronous(AJAX) File Upload using iframe?

问题描述

我试图让AJAX文件上传。我看，这是不可能做到这一点，而无需使用 IFRAME 。
我写的：

I'm trying to make ajax file upload . I read that it is not possible to do that without using iframe .
I wrote :

<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表单插件：

and using jquery form plugin :

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

结果：

文件上传成功，我可以看到上传的文件，但会出现一个对话框：

the file is uploaded successfully and I can see the uploaded file , but a dialog box appears :

因为我发回一个JSON结果显示文件名+大小等。

since I send back a json result to display the file name + size etc ..

我的问题： 我如何使用的iFrame才能够使AJAX文件上传。

My Question : How can I use the iFrame to be able to make " ajax file upload".

请注意：

1. 在我没有preFER使用特殊的插件来上传文件，如果有更合适的/更容易的解决方案。
2. 在我使用的jsp / servlet的作为服务器端语言..但我认为这是没有道理我使用的语言。

感谢

推荐答案

我会回答我的问题，我想我找到了解决办法。这些都是我跟着来实现这一目标的步骤：

I will answer my question , I think I found the solution. These are the steps that I followed to achieve the goal :

1. 请属性目标在形式点 IFRAME
2. 使用一个普通的HTML请求（不是异步/ Ajax请求）提交表单。
3. 因为目标框架是iframe中，整个页面不会被刷新 - 只需在iframe
4. 当IFRAME 的onload 事件（捕捉使用JavaScript的事件），然后做你想做的，如您可以发送回一个请求列出最近上传的文件信息。

1. Make the attribute "target" of the form point to " iframe " .
2. Use a normal HTML request ( not Asynchronous/Ajax request ) to submit the form.
3. Because the target frame is iframe , the whole page will not be refreshed - just the iframe.
4. Once iframe onload event happens (capture that event using Javascript) then do what you want, e.g. You can send back a request to list recent uploaded file info.

最后code是这样的：

The final code looks like this:

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

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

这篇关于如何使用iframe来进行异步（AJAX）文件上传？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！