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

最新推荐文章于 2024-01-09 10:32:05 发布

原创

最新推荐文章于 2024-01-09 10:32:05 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#刷新 #界面 #请求方式 #实测

本文介绍了三种实现不刷新界面的文件上传方法：利用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