Web的文件处理

---

前言

浏览器如何处理文件，文件的上载与下载到底是怎么回事？
前端的各种处理方式
- 传统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文件上传原理详解，有兴趣的可以阅读。