ブラウザからファイル（添付ファイル）をアップロードするにはどうすればよいですか？

Question

ブラウザが動作するための添付ファイルアップロードがありません。

いくつかのヒントは、他の人therehereです。 The docsはかなり良いですが、私はそれをAJAXのアップロードに翻訳できません。

私は、（比較的近代的な）ブラウザからdb にファイルをアップロードする方法を、を使用せずにjquery.couch.appを使用してアップロードする方法（単純なHTML/JavaScriptの例）を探しています.jsラッパーやもの。より簡単なベッサー。

助けてください。

Answer 1

さてさて、ここであなたの純粋なJavaScriptのファイルアップロードの実装です。

基本的なアルゴリズムは、このようなものです：

1. は、ファイル入力要素
2. からファイルを取得するファイル名を取得し、ファイルオブジェクト
3. をオフに入力した文書の最新ドキュメントのリビジョンを取得しますフェッチされたリビジョンを使用して文書化する
4. は、ファイルを添付し
にファイルを添付したい

HTML部分は、基本的に、2つの要素を持つ単純なフォーム、タイプfileの入力とタイプsubmitのボタンで構成されています。

<form action="/" method="post" name="upload"> 
    <input type="file" name="file" /> 
    <button type="submit" name="submit">Upload</button> 
</form> 

JavaScriptの部分に対応しました。

window.onload = function() { 
    var app = function() { 
     var baseUrl = 'http://127.0.0.1:5984/playground/'; 
     var fileInput = document.forms['upload'].elements['file']; 
     document.forms['upload'].onsubmit = function() { 
      uploadFile('foo', fileInput.files[0]); 
      return false; 
     }; 

     var uploadFile = function(docName, file) { 
      var name = encodeURIComponent(file.name), 
      type = file.type, 
      fileReader = new FileReader(), 
      getRequest = new XMLHttpRequest(), 
      putRequest = new XMLHttpRequest(); 

      getRequest.open('GET', baseUrl + encodeURIComponent(docName), 
       true); 
      getRequest.send(); 
      getRequest.onreadystatechange = function(response) { 
       if (getRequest.readyState == 4 && getRequest.status == 200) { 
        var doc = JSON.parse(getRequest.responseText); 
        putRequest.open('PUT', baseUrl + 
         encodeURIComponent(docName) + '/' + 
         name + '?rev=' + doc._rev, true); 
        putRequest.setRequestHeader('Content-Type', type); 
        fileReader.readAsArrayBuffer(file); 
        fileReader.onload = function (readerEvent) { 
         putRequest.send(readerEvent.target.result); 
        }; 
        putRequest.onreadystatechange = function(response) { 
         if (putRequest.readyState == 4) { 
          console.log(putRequest); 
         } 
        }; 
       } 
      }; 
     }; 
    }; 
    app(); 
}; 

は基本的に、私は、フォームのonsubmitイベントに私自身の機能を結合し、falseを返すことによって、フォームのsubmitイベントをインターセプト。私は2つのパラメータを持つ私の主な機能を呼び出し、そのイベントハンドラで

。最初のものはドキュメント名で、もう1つはアップロードするファイルです。私uploadFile()機能で

は、私は、ファイル名、ファイルの種類を設定し、いくつかの事例をつかみます。最初のHTTPリクエストは、ドキュメントの現在のリビジョンを取得するためのGETリクエストです。その要求が成功した場合は、以前に取得したリビジョンと適切なコンテンツタイプを設定してからPUTリクエスト（実際のアップロードリクエスト）を準備し、ファイルをArrayBufferに変換します。それが完了したら、ちょうど準備したHTTPリクエストを送信してからリラックスします。 HTTPリクエストヘッダ内の適切なコンテンツタイプを使用して、もちろん

PUT host/database/document/filename?revision=latest-revision 

：

スタンドアロンの添付ファイルのアップロード方式は、次のようになります。

注：ここでは防衛プログラミングをまったく使用していないことをよく認識していますが、私はそれを意図的に簡潔にしました。