Webのファイル処理

前言
ブラウザはどのようにファイルを処理して、ファイルのアップロードとダウンロードはいったいどういうことですか?フロントエンドの各種処理方式

従来のflashアップロード

iframeボックスajaxアップロード

を追加

フォームデータ提出

HTML 5の新しいツール、File API

次に、それらの原理を順に説明します.主に後者と後端がどのように処理されているかです.
Flashアップロード
知らなかった、コメントしない
iframeボックスアップロード
非表示のiframeボックスを新規作成し、このiframeフレームワークにデータを格納し、サーバ側に送信して処理します.サーバから返される情報にもiframeボックスが親フレームワークを呼び出す方法があります.とにかく、お父さんです.
フォームデータの送信
ポイントは、FormDataのデータ・オブジェクトとlevel 2のXHttpRequestオブジェクトの2つです.
フォームデータ

var form= new FormData();
form.append(field,file,filename);
//field     key，          name，file    ，filename            ，    

FormDataにファイルが含まれている限り、アップロード時にenctypeは通常のアプリケーション/x-www-form-urlencodedではなくmultipart/form-dataであり、異なる符号化タイプを指定します.
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ファイルのアップロード原理が詳しく、興味のあるものは読むことができます.