ホームページ >ウェブフロントエンド >jsチュートリアル >HTML5ファイルのドラッグアンドドロップの使用方法
HTML5ファイルのドラッグアンドドロップの使用方法
- Jennifer Anistonオリジナル
- 2025-02-25 09:48:17678ブラウズ
html5の詳細な説明ドラッグアンドドロップファイルアップロード：クライアントファイル処理と非同期サーバーのアップロード
コアポイント
- HTML5は、Webページ要素にファイルのドラッグとドロップをサポートし、JavaScriptのドラッグアンドドロップファイルを分析し、クライアントにファイルをロードおよび解析し、XMLHTTPREQUEST2を使用してファイルをサーバーにアップロードし、アップロード中にグラフィカルな進行状況を表示します。 最新のHTML5テクノロジーを使用しているため、ブラウザのサポートは不均一になる場合があります。 FirefoxおよびChromeの現在のバージョンはすべての機能をサポートしていますが、Opera、IE、およびSafariサポートは限られているか、まったくサポートされていません。
- ファイルのドラッグアンドドロップを有効にするには、JavaScriptイベントをファイル入力要素と#FileDRAG要素に添付する必要があります。 #FileDRAG要素も表示され、フォーム送信ボタンを非表示にする必要があります。
- W3CファイルAPIは、FileList、File、およびFileReaderを含むファイル操作、および選択したファイル、個々のファイルを表し、クライアントのファイルデータをそれぞれ読み取り、そのインターフェイスを使用するオブジェクトを提供します。
ブラウザ互換性チャレンジ
開始前に、このチュートリアルには最新のHTML5テクノロジーの一部が含まれるため、サポートは不均一になると予想されます。コードは現在動作しますが、APIが変更され、ブラウザが進化し続けています。 -FirefoxとChromeの最新バージョンは、すべての機能をサポートし、完全に実行します。 -OperaはJavaScriptでファイルを解析できますが、ファイルのドラッグアンドドロップとXMLHTTPREQUEST2アップロードを実装しません。 -IEおよびSafariのデスクトップバージョンは、APIをサポートしていません。 -Appleは、iPhoneおよびiPadバージョンのSafariにHTMLファイルアップロードフォームを無効にしています。誰かが理由を知っていますか？
最後に、私のコードが基本概念を示していることに注意してください。エラーチェックは非常に少ないため、生産システムを調整する必要があります。
htmlおよびcss
これは、ファイル入力タイプの標準フォームです。唯一のHTML5機能は「複数の」プロパティで、ユーザーは任意の数のファイルを選択できるようにします。 PHPを実行しているサーバーにファイルをアップロードしますが、コードはどのテクノロジーを使用してもほぼ同じです。 Hidden Max_file_size値は300,000バイトを指定します-PHPはこの値を使用しますが、クライアントにもチェックして、大きなファイルのアップロードを防ぎます。<code class="language-html"><fieldset> <legend>HTML文件上传</legend> <div> <input type="file" id="fileselect" name="fileselect[]" multiple> <label for="fileselect">选择要上传的文件：</label> <div id="filedrag">或将文件拖放到此处</div> </div> <input type="submit" value="上传文件" id="submitbutton"> </fieldset> <div id="messages">状态信息</div></code>
ファイルドラッグアンドドロップの場所としてFileDrag要素が使用されます。この要素はCSSに隠されていますが、ドラッグアンドドロップがサポートされている場合、javaScriptで有効になります：
<code class="language-css">#filedrag {
display: none;
font-weight: bold;
text-align: center;
padding: 1em 0;
margin: 1em 0;
color: #555;
border: 2px dashed #555;
border-radius: 7px;
cursor: default;
}
#filedrag.hover {
color: #f00;
border-color: #f00;
border-style: solid;
box-shadow: inset 0 3px 4px #888;
}</code>
また、ユーザーがファイルを要素にドラッグするとスタイルを変更する.hoverクラスも定義します。ブラウザは適用されません。この場合はホバースタイルですが、イベントが発生した場合、JavaScriptを使用してクラスを追加できます。
ファイルapi
w3cファイルAPIはいくつかのオブジェクトを提供します。以下を使用します。-FileList：選択したファイルを表す配列。 - ファイル：単一のファイルを表します。 -FileReader：クライアントのファイルデータを読み取り、JavaScriptで使用できるインターフェイス。
JavaScriptイベント JavaScriptの使用を開始する時が来ました。 JavaScriptライブラリを使用していないため、タイピング指を保存するために、IDおよび出力ステータスメッセージで要素を返すためにいくつかのヘルパー関数を作成します。
ファイルAPIが利用可能かどうかを確認し、init（）関数を呼び出します：
<code class="language-javascript">// 通过ID获取元素
function $id(id) {
return document.getElementById(id);
}
// 输出信息
function Output(msg) {
var m = $id("messages");
m.innerHTML = msg + m.innerHTML;
}</code>init（）関数：1。ファイル入力要素の「変更」イベントリスナーを設定します。 2. #filedrag要素を表示します。 3.「Dragover」および「Dragleave」イベントリスナーを設定して、#FileDrag要素のスタイルを変更します。 4. #FileDrag要素の「ドロップ」イベントリスナーを設定します。 5。フォーム送信ボタンを非表示 - 選択したファイルを分析してアップロードするため、必要ありません。 ファイルのドラッグアンドドロップをサポートするときに、ファイル入力要素を非表示にすることができます。個人的には、ドラッグアンドドロップがユーザビリティの問題をもたらすため、両方のオプションを提供することを好みます。 xmlhttprequest.uploadメソッドチェックは、オペラの問題を防ぐことができます。ブラウザはファイル、FilleRist、およびFileReaderをサポートしていますが、ドラッグアンドドロップイベントまたはXMLHTTPREQUEST2をサポートしていません。そのため、ファイル情報を表示できますが、#FiledRag要素を表示したり、送信ボタンを削除したりしたくありません。
<code class="language-javascript">// 调用初始化文件
if (window.File && window.FileList && window.FileReader) {
Init();
}
// 初始化
function Init() {
var fileselect = $id("fileselect"),
filedrag = $id("filedrag"),
submitbutton = $id("submitbutton");
// 文件选择
fileselect.addEventListener("change", FileSelectHandler, false);
// XHR2是否可用？
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// 文件拖放
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
filedrag.style.display = "block";
// 移除提交按钮
submitbutton.style.display = "none";
}
}</code>
ファイルドラッグアンドドロップスタイルの変更
一部の人々は、Webブラウザーでファイルのドラッグアンドドロップを経験しています。実際、経験豊富なWebユーザーはこれが不可能だと思うかもしれません。そこで、「ここにファイルをドラッグアンドドロップする」と宣言する要素を使用しました。また、スタイルを変更して、ファイルを#FileDRAGの場所にドラッグアンドドロップするタイミングを示したいと思います。
ドラッグアンドドロップまたは選択したファイルを分析します<code class="language-javascript">// 文件拖放悬停
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}</code>「閲覧」を使用して1つ以上のファイルを選択するか、#FileDRAGの場所にファイルをドラッグアンドドロップするかどうかにかかわらず、同じfilesElectHandler（）関数を使用します。
この関数：1。FileDragHover（）を呼び出して、Hoverスタイルを削除し、ブラウザイベントをキャンセルします。これは非常に重要です。そうしないと、ブラウザがファイルを表示しようとする場合があります。 2。フィルリストオブジェクトを取得します。これは、ファイル入力ボックス（e.target.files）または#filedrag要素（e.datatransfer.files）からのものです。 3.最後に、ファイルリスト内のすべてのファイルオブジェクトを介して関数がループし、parsefile（）関数のパラメーターとしてそれらを渡します...
…この記事は、あなたが好きな場合はアルメニア人に翻訳されています。この記事を読むと、学習可能な場所が大好きです。メンバーは、現実世界のHTML5やCSS3など、すべてのSetePointの電子書籍とインタラクティブなオンラインコースに即座にアクセスできます。この記事のコメントは閉じられています。 HTML5について質問はありますか？フォーラムで質問してみませんか？ HTML5ファイルのドラッグアンドドロップに関するfaq *
（記事の長さのために、次のFAQパーツは省略されています。必要に応じて、FAQパーツの翻訳を個別にリクエストできます。）<code class="language-html"><fieldset>
<legend>HTML文件上传</legend>
<div>
<input type="file" id="fileselect" name="fileselect[]" multiple>
<label for="fileselect">选择要上传的文件：</label>
<div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div></code>
この関数は、ファイルオブジェクトによって提供された3つの主要な読み取り専用属性を使用して出力情報を出力します。 - .size：ファイルサイズ（バイト）。
以上がHTML5ファイルのドラッグアンドドロップの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。