前言
浏览器如何处理文件，文件的上载与下载到底是怎么回事？
前端的各种处理方式
- 传统flash上传
- 新增iframe框ajax上载
- 表单数据提交
- HTML5的新工具——File API
我们下面依次讲一下它们的原理，主要是后两者和后端如何处理
flash上传
没有了解过，不做评论
iframe框上传
通过新建一个隐藏的iframe框，把数据放到这个iframe框架里，然后把它提交到服务器端处理，服务器返回的信息也是有iframe框调用父框架的方法处理。总之，是很坑爹的。
表单数据提交
重点有两个，一个是FormData的数据对象，一个是level2 的XHttpRequest对象。
表单数据
var form= new FormData();
form.append(field,file,filename);
//field是表单里的key，就类似于一般表单里的name，file文件对象，filename是传送至服务器里的文件名，一般缺省
只要FormData里含有文件时，上传时enctype就是multipart/form-data而非一般时的application/x-www-form-urlencoded，指定了不一样的编码类型。
XHttpRequest对象
创建xhr对象
if (typeof XMLHttpRequest !== 'undefined') {
xhr = new XMLHttpRequest();
} else {
var v = [
"Microsoft.XmlHttp",
"MSXML2.XmlHttp.5.0",
"MSXML2.XmlHttp.4.0",
"MSXML2.XmlHttp.3.0",
"MSXML2.XmlHttp.2.0"
];
for (var i=0; i < v.length; i++){
try {
xhr = new ActiveXObject(v[i]);
break;
} catch (e){}
}
}
return xhr;
xhr发起请求
xhr.open(option.method,option.action);
xhr.overridemimeType('..');//设定content-type
xhr.send(form);
xhr处理事件
可以把xhr对象当原生js对象看待，其方法的调用都符合原生对象的习惯和规律
xhr.addEventlistener('progress',function(evt){
if(evt.lengthComputable){
var complete=evt.loaded/evt.total | 0;
}
});
//progress事件在一次请求回话中定时触发，常用做进度条
//最重要的事件是readystatechange,xhr对象有0,1,2,3，4五个状态
//当状态为4的时候，回话结束，无论错误还是获得响应
//状态为4时,status==200说明从服务器成功获得响应
xhr.onreadystatechange=function(evt){
if(this.readystate!==4) return;
if(this.state==200){success..}
else fail;
};
xhr的重要变量
- xhr.state
- xhr.readystatechange
- xhr.responseText，从服务器得到的响应，纯文本格式，应该进一步解析
File API
浏览器的文件API只能读本地文件而不能写本地文件，其中最重要的是FileReader。
创建与读取
var reader=new FileReader();
reader.readAsBinaryString(file);
reader.readAsText(file);
reader.readAsDataURL(file);
//DataURL是一种指向浏览器缓存的base64编码的字符串，可以用来预览图片
事件处理
其处理机制也是与原生js对象一致的
reader.onload//成功读取
reader.onprogress//基本与前面的xhr的progress一致
reader.onloadend//无论是否成功，结束使=时均会触发
reader.onloadend=function(evt){
if(reader.error) return error;
return evt.target.result;
//evt.target指向reader,用this.result也应该可以
};
上传操作
xhr将类型设置为二进制流
xhr.send(reader.result);
但是我在node的后端没有找到好的插件来解析req，导致虽然我验证了这种方式真的上传了文件（大小），但没有实现文件写到服务器磁盘，我个人认为这才是文件上传未来的主要模式。
后端处理
req=请求头+请求体
请求头会被立即解析，而请求体不会
请求体中不仅包含了文件的内容，还有文件的信息，实际上文件是一个可读流对象，还有它的各种属性，我们解析之后才能把文件与文件，文件内容与文件信息区分开来
对于一般的文本编码，只要这样做就可以了
var post='';
req.on('data',function(chunk){
post+=querystring.parse(chunk);
});
我们可以轻易地看到内容
单对于二进制数据就没有这么简单了，文件与文件之间是有特定的分隔符的，关于这一点，cnode上有一篇文章讲的很好，文章名是node-post文件上传原理详解，有兴趣的可以阅读。
网友评论