3

ファイルシステムAPIとHTML5についてたくさん読んだことがありますが、実用的な解決策が見つからなかったので、皆さんに聞いてみます。

ファイルアップロードフォームが欲しいのですが、ドラッグドロップや通常の入力ボックスは関係ありませんが、ファイルを選択したいのですが、アップロード後、ファイルまたはフォルダ全体を取得して、クライアントにあるファイルシステムに「アップロード」する必要がありますコンピューター。実際にファイル/フォルダをクライアントのローカルファイルシステムにコピーしたいので、アップロードは括弧で囲まれています。

それも可能ですか？ユーザーが音楽や大きなビデオや映画などのファイルをローカルファイルシステムにアップロードして、アプリケーションで編集/視聴できるアプリケーションを作成したいからです。私はそれらの大きなファイルをアップロードする必要があることを知っています。それらを細かく切り分けて積み重ねてロードする必要がありますが、少し始めたいだけです:)

前もって感謝します

4

2 に答える 2

4

現時点では、この件に関する情報はほとんどないため、組み合わせた例をまとめました。

  • のwebkitdirectory属性を使用します<input type="file">。
    • これにより、ユーザーは適切なダイアログ ボックスを使用してディレクトリを選択できます。
  • ファイルシステム API の使用。
    • これは、クライアントのマシンにファイルを保存できるサンドボックス化されたファイルシステムに関するものです。
  • ファイル API の使用。
    • これは、ファイルを読み取るための API です。<input type="file">ファイルには、エレメント、ドラッグ アンド ドロップを使用した転送、またはファイルシステム API を介してアクセスできます。

これらは現在 Chrome でのみ適切に機能webkitするため、必要に応じてプレフィックスを使用しました。

http://jsfiddle.net/zLna6/3/

コード自体には、明確であることを願っているコメントがあります。

var fs,
    err = function(e) {
        throw e;
    };

// request the sandboxed filesystem
webkitRequestFileSystem(
    window.TEMPORARY,
    5 * 1024 * 1024,
    function(_fs) {
        fs = _fs;
    },
    err
);

// when a directory is selected
$(":file").on("change", function() {
    $("ul").empty();

    // the selected files
    var files = this.files;
    if(!files) return;

    // this function copies the file into the sandboxed filesystem
    function save(i) {
        var file = files[i];

        var text = file ? file.name : "Done!";

        // show the filename in the list
        $("<li>").text(text).appendTo("ul");

        if(!file) return;

        // create a sandboxed file
        fs.root.getFile(
            file.name,
            { create: true },
            function(fileEntry) {
                // create a writer that can put data in the file
                fileEntry.createWriter(function(writer) {
                    writer.onwriteend = function() {
                        // when done, continue to the next file
                        save(i + 1);
                    };
                    writer.onerror = err;

                    // this will read the contents of the current file
                    var fr = new FileReader;
                    fr.onloadend = function() {
                        // create a blob as that's what the
                        // file writer wants
                        var builder = new WebKitBlobBuilder;
                        builder.append(fr.result);
                        writer.write(builder.getBlob());
                    };
                    fr.onerror = err;
                    fr.readAsArrayBuffer(file);
                }, err);
            }, 
            err
        );
    }

    save(0);
});

$("ul").on("click", "li:not(:last)", function() {
    // get the entry with this filename from the sandboxed filesystem
    fs.root.getFile($(this).text(), {}, function(fileEntry) {
        // get the file from the entry
        fileEntry.file(function(file) {
            // this will read the contents of the sandboxed file
            var fr = new FileReader;
            fr.onloadend = function() {
                // log part of it
                console.log(fr.result.slice(0, 100));
            };
            fr.readAsBinaryString(file);
        });
    }, err);
});
于 2012-05-23T14:47:48.053 に答える
1

正確には不可能ですが、アプリはおそらく動作します。ファイル入力フォーム要素を使用してファイルを読み取ることは可能ですが、ファイルをディスクに書き戻すときに問題が発生します。

ブラウザがディスクに書き込める 2 つの方法は、1) ファイルのダウンロードと 2) HTML5 ファイルシステム APIです。オプション #1 は明らかにアプリケーションに宛先を選択させず、オプション #2 はブラウザーで作成されたサンドボックス ファイルシステムでのみ機能します。この制限は、あなたにとって大きな問題ではないかもしれません。つまり、アプリが使用するフォルダーが、ブラウザーのデータ ファイルのどこかに埋もれてしまうということです。

また、Filesystem API は現在 Chrome 専用です (ただし、これはオープン スタンダードです)。クロスプラットフォームのサポートが必要な場合は、おそらくIndexedDBを使用できます。localStorage を使用することもできますが、Chrome には厳しい 5 MB の制限があり、メディア アプリケーションにはひどいものです。

于 2012-05-23T13:41:44.867 に答える