HTML5ファイルドラッグ、ドロップ、分析、読み取り、アップロード

忙しい週でした。新しいHTML5 APIが、ユーザーがドラッグしてブラウザウィンドウにドロップしたファイルを開き、読み取り、アップロードするのにどのように役立つかを発見しました。この記事では、ブラウザのサポートのテクニックと現在のレベルをまとめたものです。

キーテイクアウト

• HTML5 APIは、ユーザーがドラッグしてブラウザウィンドウにドラッグしたファイルを開き、読み取り、アップロードするのに役立ちます。この機能は、Chrome、Firefox、およびOperaの最新バージョンでサポートされていますが、Operaは標準ファイル入力を介してのみ使用できます。
HTML5 FileListオブジェクトは、ファイルオブジェクトの配列のようなコレクションであり、FileReaderオブジェクトを使用すると、JavaScriptでテキストまたはバイナリファイルを開くことができます。これにより、さらに処理またはアップロードが発生する前にファイルの種類とサイズを確認できます。
• HTML5は、XMLHTTPREQUEST2オブジェクトに「進行状況」イベントを添付することにより、アップロード進行バーを作成できます。この機能は、ファイルをドラッグアンドドロップする機能と組み合わせて、Webアプリケーションの使いやすさを大幅に向上させることができます。
• html5 APIサポート
JavaScriptコードは、イベントハンドラーを添付する前に、ファイル、ファイルリスト、およびFilreaderオブジェクトの存在を確認する必要があります。執筆時点では、これらはChrome、Firefox、Operaの最新バージョンによってサポートされています。

Operaはこれらのオブジェクトをサポートしていますが、ドラッグアンドドロップではなく、標準のファイル入力を介してのみ使用できます。したがって、さらなるチェックが必要です。 xmlhttprequest2アップロード方法を使用することをお勧めします。

ファイルドラッグアンドドロップ

if (window.File && window.FileList && window.FileReader) { ... }

すべてのブラウザ（iPhoneおよびiPadを除く）は、馴染みのある「閲覧」ボタンを表示するファイル入力タイプをサポートしています。 HTML5で「複数」属性が導入されており、フィールドに変更イベントハンドラーを添付できます。

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

ChromeとFirefoxでは、ユーザーが選択した要素に1つ以上のファイルをドラッグすることもできます。 「Dragover」や「Dragleave」（変更のために）を含むイベントハンドラー、ドロップされたファイルを検出するための「ドロップ」を添付できます。

フィルリストオブジェクトの取得

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

HTML5 FileListオブジェクトは、ファイルオブジェクトの配列のようなコレクションです。ファイル入力フィールドは、ファイルプロパティ（event.target.files）を介してファイルリストを返します。ドロップされたファイルは、イベントのdatAtransfer.filesプロパティ（event.datatransfer.files）を介してファイルリストオブジェクトを返します。 したがって、単一のイベントハンドラーを使用して、フィルリストオブジェクトを取得できます。

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

デフォルトのイベントをキャンセルすることが重要です。これにより、ブラウザがウィンドウにドロップされたときにファイルを表示または処理しようとするのを防ぎます。 ファイルオブジェクトの分析

ファイルリストコレクションには、多くのファイルオブジェクトが含まれています。 3つの有用なファイルプロパティが提供されています。

// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

.NAME：ファイル名（パス情報は含まれていません）

.type：mimeタイプ、例えば画像/jpeg、テキスト/プレーンなど

1. .size：バイト単位のファイルサイズ。

さらに処理またはアップロードが発生する前に、ファイルの種類とサイズを確認することができます。

if (window.File && window.FileList && window.FileReader) { ... }

詳細については、HTML5とJavaScriptを使用してドロップされたファイルを開く方法を参照してください。

filereaderを使用してファイルを開く

HTML5 FileReaderオブジェクトを使用すると、JavaScriptでテキストまたはバイナリファイルを開くことができます。ご想像のとおり、readastext（）メソッドは、テキストコンテンツの取得に使用されます。

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

同様に、readasdataurl（）メソッドは、バイナリ画像データをエンコードされたデータURLとして取得します。これは、画像SRC属性またはキャンバス要素に渡すことができます。

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

詳細については、HTML5とJavaScriptを使用してドロップされたファイルを開く方法を参照してください。

ajax

を使用してファイルをアップロードします ユーザーがページに残っている間、適切なファイルをサーバーにアップロードできます。ファイルオブジェクトをxmlhttprequest2のsend（）メソッドに渡すだけの問題です。

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

また、FilenameをHTTPヘッダーとして送信しました。これはオプションですが、PHPなどの言語を使用してサーバー上の元の名前を使用してファイルを再作成することができます。

// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

詳細については、HTML5とAJAXを使用してファイルを非同期にアップロードする方法を参照してください。

アップロードプログレスバーの作成

XMLHTTPREQUEST2オブジェクトに「進行状況」イベントを添付することもできます。

// process image files under 300,000 bytes
if (file.type.indexOf("image") == 0 && file.size 

ハンドラーは、.loaded（転送されたバイト数）と.total（ファイルサイズ）プロパティを備えたイベントオブジェクトを受信します。したがって、進行状況を計算して、HTML5 Progressタグまたはその他の要素に渡すことができます。

<pre class="brush:php;toolbar:false">
if (file.type.indexOf("text") == 0) {
    var reader = new FileReader();
    reader.onload = function(e) {
		// get file content
		var text = e.target.result;
		...
    }
    reader.readAsText(file);
}

詳細については、html5およびjavascriptでグラフィカルファイルアップロードプログレスバーを作成する方法を参照してください。 このシリーズを楽しんだことを願っています。ファイルのドラッグアンドドロップは、Webアプリケーションの使いやすさを変換できる重要な機能です。 HTML5はついに簡単になります。 HTML5ファイルのドラッグ、ドロップ、読み取り、分析、およびアップロード

に関するよくある質問（FAQ）

WebアプリケーションにHTML5ドラッグアンドドロップ機能を実装するにはどうすればよいですか？

HTML5ドラッグアンドドロップ機能を実装するには、いくつかのステップが含まれます。まず、ユーザーがファイルをドロップできる領域であるドロップゾーンを作成する必要があります。これは任意のHTML要素になる可能性がありますが、「ドラッグ可能な」属性をtrueに設定する必要があります。次に、「ドラッグオーバー」と「ドロップ」イベントにイベントリスナーを追加する必要があります。 「ドラッグオーバー」イベントは、ドラッグされたアイテムがドロップゾーンの上にあるときに発射され、アイテムがドロップされると「ドロップ」イベントが発射されます。 「ドロップ」イベントのイベントハンドラーでは、イベントオブジェクトの「datAtransfer.files」プロパティからドロップされたファイルにアクセスできます。「datatransfer.files」が「ドロップ」イベントが発射されるときに空になるのはなぜですか？ 「DataTransfer.Files」プロパティは、「ドロップ」イベントにのみ入力されます。正しいイベントハンドラーでアクセスしていることを確認してください。

ドロップされたファイルのコンテンツを読み取るにはどうすればよいですか？

FileReader APIを使用して、ドロップされたファイルのコンテンツを読み取ることができます。まず、新しいFileReaderオブジェクトを作成する必要があります。次に、「readastext」または「readasdataurl」メソッドを使用して、ファイルの内容を読み取ることができます。 「readastext」メソッドはファイルをテキスト文字列として読み取り、「readasdataurl」メソッドはファイルをデータURLとして読み取ります。

ファイルがアップロードされている間に進行状況バーを表示するにはどうすればよいですか？ 「進行状況」イベントは、アップロードが進むにつれて定期的に解雇されます。ハンドラーの場合は、進行状況の割合を計算して、それに応じて進行状況バーを更新できます。 XMLHTTPREQUESTオブジェクトの「アップロード」プロパティを「進行状況」イベントを有効にするためにTRUEに設定してください。 FileListオブジェクトの各アイテムは、ドロップされたファイルを表すファイルオブジェクトです。たとえば、コンテンツを読み取るか、サーバーにアップロードすることにより、各ファイルを個別に処理できます。

「Datatransfer.files」プロパティのファイルオブジェクトの「タイプ」プロパティをチェックすることでドロップできるファイルの種類を制限できます。 「タイプ」プロパティは、ファイルのMIMEタイプを表す文字列です。ファイルタイプが許可されていない場合は、「ドロップ」イベントハンドラーのイベントオブジェクトの「PreventDefault」メソッドを呼び出すことで、ドロップアクションを防ぐことができます。

ネストされた要素のドラッグアンドドロップイベントを処理するにはどうすればよいですか？

ネストされた要素のドラッグアンドドロップイベントの処理は、イベントがDOMツリーにバブルするため、難しい場合があります。子要素が子要素を対象としたドラッグアンドドロップイベントを受信するのを防ぐために、子要素のイベントハンドラーのイベントオブジェクトの「ストッププロパゲーション」メソッドメソッドを呼び出すことができます。 「ドラッグリーブ」と「ドロップ」イベントハンドラー。 CSSでのクラスの外観を定義できます。

自動テストでドラッグアンドドロップ機能をテストするにはどうすればよいですか？

ドラッグアンドドロップ機能をテストするには、複雑なユーザーインタラクションが含まれるため、困難な場合があります。ただし、Seleniumなどの一部のテストライブラリは、ドラッグアンドドロップアクションをシミュレートする方法を提供します。モックの「ドロップ」イベントを作成して、ドロップゾーン要素に派遣することもできます。

以上がHTML5ファイルドラッグ、ドロップ、分析、読み取り、アップロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。