大佬教程收集整理的这篇文章主要介绍了jquery – 如何使用iframe进行异步(AJAX)文件上传?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<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'); });
以上是大佬教程为你收集整理的jquery – 如何使用iframe进行异步(AJAX)文件上传?全部内容,希望文章能够帮你解决jquery – 如何使用iframe进行异步(AJAX)文件上传?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。