如何使用iframe实现异步(AJAX)文件上传？
如何使用iframe实现异步(AJAX)文件上传？
提问于 2010-05-26 08:26:57
我正在尝试让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来进行“ajax文件上传”。
注意：
- 如果有更合适/更简单的解决方案，我不喜欢使用特殊的插件上传文件。
- 我使用jsp/servlets作为服务器端语言。但我认为我使用哪种语言是没有意义的。
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-05-26 11:35:54
我会回答我的问题，我想我找到了解决方案。以下是我为实现目标而遵循的步骤：
- 使表单的属性“ target ”指向“ iframe ”。使用普通的请求(非异步/Ajax请求)提交iframe。目标框架是iframe，整个页面不会刷新，只刷新iframe。一旦发生iframe E114onload事件(使用Javascript捕获该事件)，则可以执行所需的操作，例如，您可以发回一个请求，以列出最近上载的文件信息。H216<代码>G217>
最终的代码如下所示：
<!-- 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');
});Stack Overflow用户
发布于 2014-05-07 11:28:32
这个例子取自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();
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2909442
复制相关文章
相似问题