我试图使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());
}
});
结果 ：
我的问题 ：
我如何使用iFrame能够使“ajax文件上传”。
注意：
>我不喜欢使用特殊的插件来上传文件，如果有更合适/更容易的解决方案。
>我使用jsp / servlets作为服务器端语言..但我认为没有意义我使用的语言。
谢谢
解决方法
我会回答我的问题，我想我找到了解决方案。这些是我遵循的步骤，以实现目标：
>使表单的属性“target”指向“iframe”。
>使用普通的HTML请求(非Asynchronous / Ajax请求)提交表单。
>因为目标框架是iframe，整个页面不会被刷新 – 只是iframe。
>一旦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');
});
