3

つまり、ユーザーがシステムからビデオ ファイルを選択したときに、アップロードしたいファイルが既に Web ページに表示されているということです。

FileAPI JS を使用してプレビューするために、既に画像ファイルを使用しています。動画ファイル用の FileAPI JS でも同じことをしたいと思います。

（だから、それは私のクライアント側での作業でなければなりません）

感謝と回答をお待ちしております:)

4

1 に答える 1

6

FileReaderまたはcreateObjectURLのいずれかを使用できます。どちらも仕事を成し遂げますが、FileReader はブラウザーでのサポートが少し広くなっています。

createObjectURL同期的に実行され、メモリ内のファイルを参照する短い文字列である Blob URL が返されます。使い終わったらすぐに解放できます。

FileReader非同期で実行され、コールバックが必要になり、ファイル全体を表すはるかに長い文字列であるデータ URI が提供されます。これは非常に大きくなる可能性があり、Javascript ガベージ コレクションでメモリから解放されます。

createObjectURL最初に を試みて にフォールバックする例を次に示しFileReaderます。（エラーチェック等はご自身でお願いします）

var video = document.getElementById('video'),
    input = document.getElementById('input');

input.addEventListener('change', function (evt) {
    var reader = new window.FileReader(),
        file = evt.target.files[0],
        url;

        reader = window.URL || window.webKitURL;

    if (reader && reader.createObjectURL) {
        url = reader.createObjectURL(file);
        video.src = url;
        reader.revokeObjectURL(url);  //free up memory
        return;
    }

    if (!window.FileReader) {
        console.log('Sorry, not so much');
        return;
    }

    reader = new window.FileReader();
    reader.onload = function(evt) {
       video.src = evt.target.result;
    };
    reader.readAsDataURL(file);
}, false);

ここでの作業例: http://jsbin.com/isodes/1/edit

Mozilla には、ファイルを取得した後のアップロード方法に関する詳細な記事があります。

IE10 は両方をサポートしていますが、IE9 はどちらもサポートしていないため、プレビューなしで通常のフォーム アップロードにフォールバックする必要があります。

于 2013-01-25T07:48:02.507 に答える