教你三种不同的方法实现不刷新界面

本文介绍了三种实现不刷新界面的文件上传方法:利用HTML5的FormData,结合AJAX实现无刷新上传;使用iframe避免页面刷新,通过load事件获取返回数据;以及借助FileReader读取文件内容并以二进制格式POST。每种方法的实现细节、优缺点及浏览器兼容性进行了探讨。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向。以一个简单的demo做说明:

      html如下所示,请求的路径action为"upload",其它的不做任何处理:

   <form method="POST" action="upload" enctype="multipart/form-data">
        名字 <input type="text" name="user"></input>
        头像 <input type="file" name="file"></input>
        <input type="submit" id="_submit" value="提交"></input>
   </form>

      服务端(node)response直接返回: "Recieved form data",演示如下:

       可以看到默认情况下,form请求upload的同时重定向到upload。但是很多情况下是希望form请求像ajax一样,不会重定向或者刷新页面。像上面的场景,当上传完成之后,将用户选择的头像显示在当前页面。

      解决办法第一种是使用html5的FormData,将form里面的数据封装到FormData对象里,然后再以POST的方式send出去。如下面代码所示,对提交按钮的单击事件做一个响应,代码第6行获取到form的DOM对象,然后第8行构造一个FormData的实例,第18行,将form数据发送出去。

复制代码
 1     document.getElementById("_submit").onclick = function(event){
 2           //取消掉默认的form提交方式
 3           if(event.preventDefault) event.preventDefault();
 4           else event.returnValue = false;                           //对于IE的取消方式
 5   
 6           var formDOM = document.getElements
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值