jQuery 如何使用 iframe 进行异步（AJAX）文件上传？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2909442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Asynchronous(AJAX) File Upload using iframe?
提问by Abdullah
I'm trying to make ajax file upload . I read that it is not possible to do that without using iframe.
I wrote :
我正在尝试使 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>
and using jquery form plugin :
并使用 jquery 表单插件：
$('#myForm').ajaxForm({
dataType: 'json',
success: function(data){
alert(data.toSource());
}
});
The Result :
结果 ：
the file is uploaded successfully and I can see the uploaded file , but a dialog box appears :
文件上传成功，我可以看到上传的文件，但出现一个对话框：
since I send back a json result to display the file name + size etc ..
因为我发回一个json结果来显示文件名+大小等..
My Question :How can I use the iFrame to be able to make " ajax file upload".
我的问题：如何使用 iFrame 进行“ajax 文件上传”。
Note:
笔记：
- I don't prefer to use special plugin to upload file , if there is more appropriate/easier solutions.
- I use jsp/servlets as a server-side language .. but I think it does not make sense which language I use .
- 如果有更合适/更简单的解决方案，我不喜欢使用特殊插件来上传文件。
- 我使用 jsp/servlets 作为服务器端语言 .. 但我认为我使用哪种语言没有意义。
Thanks
谢谢
回答by Abdullah
I will answer my question , I think I found the solution. These are the steps that I followed to achieve the goal :
我会回答我的问题，我想我找到了解决方案。这些是我为实现目标而遵循的步骤：
- Make the attribute "target" of the formpoint to " iframe" .
- Use a normal HTML request ( not Asynchronous/Ajax request ) to submit the form.
- Because the target frame is iframe , the whole page will not be refreshed - just the iframe.
- Once iframe onloadevent 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.
- 使表单的属性“ target”指向“ iframe”。
- 使用普通的 HTML 请求（不是异步/Ajax 请求）提交表单。
- 因为目标框架是 iframe ，所以不会刷新整个页面——只刷新 iframe。
- 一旦 iframe onload事件发生（使用 Javascript 捕获该事件）然后做你想做的，例如你可以发回一个请求来列出最近上传的文件信息。
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');
});
回答by JJ_Coder4Hire
This example taken from BugKiller. complete working example which allows you to upload a logo and see it immediately in the html page, following which the upload value gets cleared:
这个例子取自 BugKiller。完整的工作示例，它允许您上传徽标并立即在 html 页面中看到它，然后上传值被清除：
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:
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 behind (C#):
上传处理程序代码（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();
}
}
}
