请求有两种方式,一种是用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