一个模拟ajax异步上传文件例子

最新推荐文章于 2024-07-23 11:32:13 发布

华州一霸

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量266

点赞数

分类专栏：笔记文章标签：表单 javascript

本文链接：https://blog.csdn.net/u014655465/article/details/47610273

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

众说周知AJAX可以提交表单，但是如果表单里有文件的话ajax就无能为力了。这时就要借助iframe ,简单来说一下几步：

1.首先创建一个iframe 设施name属性为hide_iframe。

2.把设置form表单的target为iframe的name。

3.iframe注册onload事件用作表单提交成功后的回调函数。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>模拟AJAX无刷新上传文件</title> 
  </head>
  
  <body>
	 <iframe name="hide_iframe" style="display:none;" οnlοad="loadUserImgURL(this)" ></iframe>
	 <form id="userimgupload" action="UserinfoAction_upLoadUserImg.action" enctype="multipart/form-data" method="post" target="hide_iframe">
     <input type="file" id="userImg" name="userImg" οnchange="javascript:uploadImg()"/>
      <button>提交</button>
     </form>
  </body>
  <script type="text/javascript">
  function loadUserImgURL(iframe){   
        var doc = iframe.contentDocument ? iframe.contentDocument: iframe.contentWindow.document;
        var response;  
        try{  
            response =  doc.getElementsByTagName("pre")[0].innerHTML;  
        } catch(err){  
            response =  '';  
        }
        if(response!=''){
         var message=JSON.parse(response);
         //TODO 业务逻辑      
      }
    }  
  </script>
</html>

华州一霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个模拟ajax异步上传文件例子

众说周知AJAX可以提交表单，但是如果表单里有文件的话ajax就无能为力了。这时就要借助iframe ,简单来说一下几步： 1.首先创建一个iframe 设施name属性为hide_iframe。 2.把设置form表单的target为iframe的name。 3.iframe注册onload事件用作表单提交成功后的回调函数。模拟AJAX无
复制链接

扫一扫

专栏目录