12

ブラウザの添付ファイルのアップロードが機能しません。

いくつかのヒントはここにあります。ドキュメントは非常に優れていますが、それを AJAX アップロードに変換できません。

jquery.couch.app.js ラッパーなどを使用せずに (比較的最新の) ブラウザーから db にファイルをアップロードする方法の非常に単純な HTML/JavaScript の例 (jQuery を使用または使用しない) を探しています。シンプルであるほど良い。

どんな助けでも感謝します。

4

1 に答える 1

20

これで、純粋な JavaScript ファイル アップロードの実装が完成しました。

基本的なアルゴリズムは次のようになります。

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

fileHTML 部分は基本的に、 type の input と typeの button の2 つの要素を持つ単純なフォームで構成されます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();
};

基本的にはsubmit、独自の関数をフォームのonsubmitイベントにバインドして false を返すことで、フォームのイベントをインターセプトします。

そのイベント ハンドラーで、2 つのパラメーターを指定してメイン関数を呼び出します。最初のものはドキュメント名で、2 つ目はアップロードするファイルです。

私のuploadFile()関数では、ファイル名、ファイル タイプを設定し、いくつかのインスタンスを取得します。最初の HTTP リクエストは、ドキュメントの現在のリビジョンを取得するための GET リクエストです。そのリクエストが成功した場合は、以前に取得したリビジョンと適切なコンテンツ タイプを設定して PUT リクエスト (実際のアップロード リクエスト) を準備し、ファイルを ArrayBuffer に変換します。それが完了したら、準備したばかりの HTTP リクエストを送信するだけで、リラックスできます。

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

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

もちろん、HTTP 要求ヘッダーで適切なコンテンツ タイプを使用します。

注: ここで防御的プログラミングをまったく使用していないことは十分承知しています。簡潔にするために意図的に使用しました。

于 2012-08-10T23:06:14.927 に答える