发请求有两种方式,一种是用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数据发送出去。

     document.getElementById("_submit").onclick = function(event){
//取消掉默认的form提交方式
if(event.preventDefault) event.preventDefault();
else event.returnValue = false; //对于IE的取消方式 var formDOM = document.getElementsByTagName("form")[0];
//将form的DOM对象当作FormData的构造函数
var formData = new FormData(formDOM);
var req = new XMLHttpRequest();
req.open("POST", "upload");
//请求完成
req.onload = function(){
if(this.status === 200){
//对请求成功的处理
}
}
//将form数据发送出去
req.send(formData);
19       //避免内存泄漏
20       req = null;
}

上传成功后,服务将返回图片的访问地址,补充14行对请求成功的处理:在submit按钮的上方位置显示上传的图片:

                 var img = document.createElement("img");
img.src = JSON.parse(this.responseText).path;
formDOM.insertBefore(img, document.getElementById("_submit"));

示例:

如果使用jQuery,可以把formData作为ajax的data参数,同时设置contentType: false和processData: false,告诉jQuery不要去处理请求头和发送的数据。

看起来这种提交方式跟ajax一样,但是其实并不是完全一样,form提交的数据格式有三种,如果要上传文件则必须为multipart/form-data,所以上面的form提交请求里的http的头信息里面的Content-Type为multipart/form-data,而普通的ajax提交为application/json。form提交完整的Content-Type如下:

"content-type":"multipart/form-data; boundary=------WebKitFormBoundaryYOE7pWLqdFYSeBFj"

除了multipart/form-data之外,还指定了boundary,这个boundary的作用是用来区分不同的字段。由于FormData对象是不透明的,调用JSON.stringify将会返回一个空的对象{},同时FormData只提供append方法,所以无法得到FormData实际上传的内容,但是可以通过分析工具或者服务收到的数据进行查看。在上面如果上传一个文本文件,那么服务收到的POST数据的原始格式是这样的:

------WebKitFormBoundaryYOE7pWLqdFYSeBFj
Content-Disposition: form-data; name="user" abc
------WebKitFormBoundaryYOE7pWLqdFYSeBFj
Content-Disposition: form-data; name="file"; filename="test.txt"
Content-Type: text/plain 这是一个文本文件的内容。 ------WebKitFormBoundaryYOE7pWLqdFYSeBFj--

从上面服务收到的数据看出FormData提交的格式,每个字段以boundary隔开,最后以--结束。而ajax请求,send出去的数据格式是自定义的,一般都是以key=value中间用&连接:

        var req = new XMLHttpRequest();
var sendData = "user=abc&file=这是一个文本文件的内内容";
req.open("POST", "upload");
//发送的数据需要转义,见上面提到的三种格式
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(sendData);

服务就会收到和send发出去的字符串一模一样的内容,然后再作参数解析,所以就得统一参数的格式:

user=abc&file=这是一个文本文件的内容

从这里可以看出POST本质上并不比GET安全,POST只是没有将数据放在网址传送而已。

考虑到FormData到了IE10才支持,如果要支持较低版本的IE,那么可以借助iframe。

文中一开始就说,默认的form提交会使页面重定向,而重定向的规则在target中指定,可以和a标签一样指定为"_blank",在新窗口中打开;还可以指定为一个iframe,在该iframe中打开。所以可以弄一个隐藏的iframe,将form的target指向这个iframe,当form请求完成时,返回的数据就会由这个iframe显示,正如上面在新页面显示的:"Recieved form data"。请求完成后,iframe加载完成,触发load事件,在load事件的处理函数里,获取该iframe的内容,从而拿到服务返回的数据了!拿到后再把iframe删掉。

在提交按钮的响应函数里,首先创建一个iframe,设置iframe为不可见,然后再添加到文档里:

        var iframe = document.createElement("iframe");
iframe.width = 0;
iframe.height = 0;
iframe.border = 0;
iframe.name = "form-iframe";
iframe.id = "form-iframe";
iframe.setAttribute("style", "width:0;height:0;border:none");
//放到document
this.form.appendChild(iframe);

改变form的target为iframe的name值:

        this.form.target = "form-iframe";

然后再响应iframe的load事件:

        iframe.onload = function(){
var img = document.createElement("img");
//获取iframe的内容,即服务返回的数据
var responseData = this.contentDocument.body.textContent || this.contentWindow.document.body.textContent;
img.src = JSON.parse(responseData).path;
f.insertBefore(img, document.getElementById("_submit"));
//删掉iframe
setTimeout(function(){
var _frame = document.getElementById("form-iframe");
_frame.parentNode.removeChild(_frame);
}, 100);
}

最后提交请求:

//如果提示submit函数不存在,请注意form里面是否有id/value为submit的控件
this.form.submit(); 

第二种办法到这里就基本可以了,但是如果看163邮箱或者QQ邮箱上传文件的方式,会发现和上面的两种方法都不太一样。用httpfox抓取请求的数据,会发现上传的内容的格式并不是上面说的用boundary隔开,而是直接把文件的内容POST出去了,而文件名、文件大小等相关信息放在了文件的头部。如163邮箱:

POST Data:
this is a text Headers:
Mail-Upload-name: content.txt
Mail-Upload-size: 15

可以推测它们应该是直接读取了input文件的内容,然后直接POST出去了。要实现这样的功能,可以借助FileReader,读取input文件的内容,再保留二进制的格式发送出去:

         var req = new XMLHttpRequest();
req.open("POST", "upload");
//设置和邮箱一样的Content-Type
req.setRequestHeader("Content-Type", "application/octet-stream");
var fr = new FileReader();
fr.onload = function(){
req.sendAsBinary(this.result);
}
req.onload = function(){
//一样,省略
}
12   //读取input文件内容,放到fileReader的result字段里
fr.readAsBinaryString(this.form["file"].files[0]);

代码第13行执行读文件,读取完毕后触发第6行的load响应函数,第7行以二进制文本形式发送出去。由于sendAsBinary的支持性不是很好,可以自行实现一个

   if(typeof XMLHttpRequest.prototype.sendAsBinary === 'undefined'){
XMLHttpRequest.prototype.sendAsBinary = function(text){
var data = new ArrayBuffer(text.length);
var ui8a = new Uint8Array(data, 0);
for (var i = 0; i < text.length; i++){
ui8a[i] = (text.charCodeAt(i) & 0xff);
}
this.send(ui8a);
}
}

代码的关键在于第6行,将字符串转成8位无符号整型,还原二进制文件的内容。在执行了fr.readAsBinaryString之后,二进制文件的内容将会以utf-8的编码以字符串形式存放到result,上面的第6行代码将每个unicode编码转成整型(&0xff或者parseInt),存放到一个8位无符号整型数组里面,第8行把这个数组发送出去。如果直接send,而不是sendAsBinary,服务收到的数据将无法正常还原成原本的文件。

上面的实现需要考虑文件太大,需分段上传的问题。

关于FileReader的支持性,IE10以上支持,IE9有另外一套File API。

文章讨论了3种办法实现无刷新上传文件,分别是使用iframe、FormData和FileReader,支持性最好是的iframe,但是从体验的效果来看FormData和FileReader更好,因为这两者不用生成一个无用的DOM再删除,其中FormData最简单,而FileReader更加灵活。

个人博客: http://yincheng.site/js-upload-file

参考:

1.Ajax Style File Uploading using Hidden iFrame

2. 在web应用中使用文件

3. AJAX File Uploads with the iFrame Method

4. 使用FormData对象

三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader的更多相关文章

  1. Selenium系列(十一) - 针对两种上传文件方式的实现方案

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  2. PHP实现上传文件并存进数据库的方法

    本文实例讲述了PHP实现上传文件并存进数据库的方法.分享给大家供大家参考.具体如下: show_add.php文件如下: <?php if(!isset($_REQUEST[''id'']) o ...

  3. upload三种上传方式(上)---Servlet---post---commons-fileupload.1.2.1.jar方式请求上传文件

    上传前进行的配置选项: 1.在下方的Servers中,右键你的tomcat--open,选中下面两个配置. 第一个:Serve modules without publishing 作用:tomcat ...

  4. 三 : spring-uploadify上传文件

    一 : applicationContext.xml中:必须声明不然获取不到<!-- 上传文件的配置 --> <bean id="multipartResolver&quo ...

  5. from表单实现无跳转上传文件,接收页面后台数据。

    本文基于我刚写的http://www.cnblogs.com/iwang5566/p/6287529.html进行了简单的扩展,实现页面无跳转表单数据提交,并接收后台返回的数据. 下载好,上一篇文章d ...

  6. from表单实现无跳转上传文件,接收页面后台数据

    实现无跳转发送表单数据.文件,并能接收后台返回的数据. 主要技术要点: 1.form表单添加target属性,指定一个iframme的name:form表单提交后在iframe内嵌窗口接受响应,主页面 ...

  7. Java如何解决form表单上传文件,以及页面返回处理结果通知!

    前端JSP代码 <form id='formSumbit' class='form-horizontal' action='/ncpay/route/chlsubmcht/batchImpor' ...

  8. web 中常用的两种上传文件的方法总结

    这里我们来总结整理一下常用的两种文件上传方式以及要注意的东西: 1.springmvc .MultipartFile 的上传方式. 2.org.apache.commons.fileupload 使用 ...

  9. java的几种上传文件方法

    这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/commonsmultipartreso ...

随机推荐

  1. 了不起的 nodejs-TwitterWeb 案例 bug 解决

    了不起的nodejs算是一本不错的入门书,不过书中个别案例存在bug,按照书中源码无法做出和书中相同效果,原本兴奋的心情掺杂着些许失落. 现在我们看一下第七章HTTP,一个Twitter Web客户端 ...

  2. lua 学习笔记(1)

    一.lua函数赋值与函数调用         在lua中函数名也是作为一种变量出现的,即函数和所有其他值一样都是匿名的,当要使用某个函数时,需要将该函数赋值给一个变量,这样在函数块的其他地方就可以通过 ...

  3. Android调用微信登陆、分享、支付

    前言:用了微信sdk各种痛苦,感觉比qq sdk调用麻烦多了,回调过于麻烦,还必须要在指定包名下的actvity进行回调,所以我在这里写一篇博客,有这个需求的朋友可以借鉴一下,以后自己别的项目有用到也 ...

  4. pt-online-schema-change中update触发器的bug

    pt-online-schema-change在对表进行表结构变更时,会创建三个触发器. 如下文测试案例中的t2表,表结构如下: mysql> show create table t2\G . ...

  5. JQuery easyUI DataGrid 创建复杂列表头(译)

    » Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...

  6. JS继承之寄生类继承

    原型式继承 其原理就是借助原型,可以基于已有的对象创建新对象.节省了创建自定义类型这一步(虽然觉得这样没什么意义). 模型 function object(o){ function W(){ } W. ...

  7. 模仿Linux内核kfifo实现的循环缓存

    想实现个循环缓冲区(Circular Buffer),搜了些资料多数是基于循环队列的实现方式.使用一个变量存放缓冲区中的数据长度或者空出来一个空间来判断缓冲区是否满了.偶然间看到分析Linux内核的循 ...

  8. jquery-treegrid树状表格的使用(.Net平台)

    上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...

  9. Android开发学习——动画

    帧动画> 一张张图片不断的切换,形成动画效果* 在drawable目录下定义xml文件,子节点为animation-list,在这里定义要显示的图片和每张图片的显示时长              ...

  10. iOS中支付宝集成

    iOS中支付宝集成 如今各种的App中都使用了三方支付的功能,现在将我在使用支付宝支付集成过程的心得分享一下,希望对大家都能有所帮助 要集成一个支付宝支付过程的环境,大致需要: 1>公司:先与支 ...