jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 如何使用iframe进行异步(AJAX)文件上传?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使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作为服务器端语言..但我认为没有意义我使用的语言。

谢谢

解决方法

我会回答我的问题,我想我找到了解决方案。这些是我遵循的步骤,以实现目标:

>使表单的属性“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,请注明来意。