HTML5を使用してドロップされたファイルを開く方法

私の最後の投稿では、HTML5ファイルのドラッグ＆ドロップの使用方法 、HTML5ファイルAPIを使用し、ドラッグアンドドロップイベントを実装し、ファイル情報を取得する方法を発見しました。今日は、JavaScriptを使用してクライアントにファイルをロードしようとします。

なぜJavaScriptでローカルファイルを開くのですか？

HTMLフォームからファイルをアップロードするのは不格好です。マルチメガバイトの写真をカメラからWebサーバーに転送するときに、人々はそれを使用することがよくあります。ファイルを見つけたと仮定すると、アップロードは間違った写真、サポートされていない形式、または許可されているよりも大きなファイルサイズであることを見つけるのに数分かかる可能性があります。これまで、開発者は、より良いユーザーエクスペリエンスを提供するために、Flashまたはその他のプラグインに依存する必要がありました。 JavaScriptの前処理には、多くの利点があります。

• ローカルファイル処理は高速です。
• ファイルを分析して、それらが正しい形式であり、特定のサイズよりも低いことを確認できます。 画像などのファイルは、アップロードする前にプレビューできます。
• キャンバス要素の画像をトリミングまたはサイズ変更してから、結果のファイルをアップロードすることができます。
• fileReaderオブジェクト
FileReaderはW3CファイルAPIの一部を形成し、ファイルオブジェクトで参照されているファイルから非同期的にデータをロードする4つの方法を提供します。

.readastext（ファイルf、[エンコード]）：ファイルfを文字列に読み取ります。 UTF-8エンコーディングが想定されていますが、オプションのエンコードパラメーターは異なる形式を指定できます。

.readasdataurl（ファイルf）：ファイルfをエンコードされたデータurlに読み取ります

• .ReadAsBinaryString（ファイルF）：ファイルFをバイナリ文字列
として読み取ります
• .ReadAsRayBuffer（ファイルF）：ファイルFをArrayBufferオブジェクトとして読み取ります

次のコードでは、最初の2つの方法を使用して、テキストファイルと画像ファイルをロードおよび表示します。

JavaScriptで非同期にファイルを開く

これは、#fileedRag要素に選択またはドロップされたときにファイルオブジェクトを渡される元のparsefile（）関数です。

// output file information
function ParseFile(file) {

	Output(
		"<p>File information: <strong>" + file.name +
		"</strong> type: <strong>" + file.type +
		"</strong> size: <strong>" + file.size +
		"</strong> bytes</p>"
	);
	
}

ステータスの更新に続いて、テキストファイル（Text/Plain、Text/HTML、Text/CSSなど）があるかどうかを確認し、fileReader.readastext（）メソッドを使用してロードし、結果を表示します（文字を脱出した後）：

	// display text
	if (file.type.indexOf("text") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong></p><pre class="brush:php;toolbar:false">" + 
				e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
				"

" ); } reader.readAsText(file); } 同様に、画像ファイル（Image/JPEG、Image/GIF、Image/PNGなど）があるかどうかを確認し、fileReader.readasDataurl（）メソッドを使用してデータURLにロードし、結果をIMGタグのSRC属性に渡すことができます。

	// display an image
	if (file.type.indexOf("image") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong><br />" +
				'<img src="' + e.target.result + '" /></p>'
			);
		}
		reader.readAsDataURL(file);
	}

Firefox、Chrome、またはOperaのデモページをご覧ください（ドラッグ＆ドロップサポートなし）。ファイルをダウンロードすることもできます コードを調べる。 これは有用ですが、最終的にはファイルをWebサーバーにアップロードする必要があります。 HTML5とajax…を使用して、ファイルを非同期的にアップロードする方法をお楽しみに HTML5とJavaScriptを開いたファイルを開くことについてよく尋ねる質問（FAQ）

html5とjavascriptを使用してドロップされたファイルを開く目的は何ですか？

HTML5とJavaScriptは、ドロップされたファイルを開くために使用され、ウェブサイト上のユーザーエクスペリエンスを強化します。この機能により、ユーザーはローカルシステムからファイルをWebページにドラッグアンドドロップできます。ドロップすると、ファイルはJavaScriptを使用して読み取り、処理できます。これは、ファイルのアップロード、ファイルコンテンツの読み取り、Webアプリケーション内の画像やドキュメントの処理などのタスクに特に役立ちます。

HTML5のドラッグアンドドロップ機能はどのように機能しますか？ユーザーがシステム上のファイルを選択し、Webページにドラッグすると、「Dragover」イベントがトリガーされます。ファイルがドロップされている場合、「ドロップ」イベントがトリガーされます。これらのイベントの一部であるDataTransferプロパティは、ファイルデータを保持し、ファイルへのアクセスと処理に使用できます。ファイルがWebページにドロップされると、DataTransferプロパティからアクセスできます。新しいFileReaderオブジェクトを作成でき、Fileコンテンツを読み取るためにReadaStextまたはReadasDataurlメソッドを使用できます。結果は、FileReaderオブジェクトの「ロード」イベントでアクセスできます。

複数のドロップされたファイルを一度に開くことはできますか？ DataTransferプロパティは、フィルリストオブジェクトである「ファイル」プロパティを提供します。このオブジェクトは、ドロップされたすべてのファイルのリストを表します。このリストをループして、各ファイルに個別にアクセスして処理できます。

HTML5とJavaScriptを使用してどのタイプのファイルを開くことができますか？

HTML5とJavaScriptを使用してドロップされたファイルを開くと安全ですか？ただし、ファイルデータがサーバーに送信された場合、セキュリティの問題を防ぐために適切に検証され、サニタイズする必要があります。

Webページにドロップされたファイルのコンテンツを表示するにはどうすればよいですか？たとえば、ファイルが画像の場合、データURLとして読み取り、IMG要素のSRC属性として設定できます。ファイルがテキストファイルである場合、そのコンテンツをテキスト要素に挿入できます。

ドロップできるファイルの種類を制限できますか？

ドロップできるファイルの種類を直接制限できません。ファイルオブジェクトの「タイプ」プロパティを使用してドロップされたファイルのタイプを確認できます。ファイルタイプが許可されたタイプと一致しない場合、エラーメッセージを表示してファイルを無視できます。

さまざまなフォルダーからファイルをドラッグアンドドロップできますか？ドラッグアンドドロップ機能は、ファイルの場所に依存しません。ユーザーがファイルにアクセスできる限り、それらをドラッグしてWebページにドロップすることができます。

以上がHTML5を使用してドロップされたファイルを開く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。