html5の詳細な説明ドラッグアンドドロップファイルアップロード：クライアントファイル処理と非同期サーバーのアップロード

How to Use HTML5 File Drag and Drop

コアポイント

HTML5は、Webページ要素にファイルのドラッグとドロップをサポートし、JavaScriptのドラッグアンドドロップファイルを分析し、クライアントにファイルをロードおよび解析し、XMLHTTPREQUEST2を使用してファイルをサーバーにアップロードし、アップロード中にグラフィカルな進行状況を表示します。

ブラウザにデスクトップファイルをドラッグアンドドロップすることは、Webアプリケーション統合の究極の目標の1つです。これは、次の方法を紹介します。 4. XmlhttpRequest2を使用して、ファイルを上映します。

ブラウザ互換性チャレンジ

開始前に、このチュートリアルには最新の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はこの値を使用しますが、クライアントにもチェックして、大きなファイルのアップロードを防ぎます。

<fieldset><legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div>

ログイン後にコピー

ファイルドラッグアンドドロップの場所としてFileDrag要素が使用されます。この要素はCSSに隠されていますが、ドラッグアンドドロップがサポートされている場合、javaScriptで有効になります：

#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;
}

ログイン後にコピー

また、ユーザーがファイルを要素にドラッグするとスタイルを変更する.hoverクラスも定義します。ブラウザは適用されません。この場合はホバースタイルですが、イベントが発生した場合、JavaScriptを使用してクラスを追加できます。

ファイルapi

w3cファイルAPIはいくつかのオブジェクトを提供します。以下を使用します。-FileList：選択したファイルを表す配列。 - ファイル：単一のファイルを表します。 -FileReader：クライアントのファイルデータを読み取り、JavaScriptで使用できるインターフェイス。

JavaScriptイベント< JavaScriptの使用を開始する時が来ました。 JavaScriptライブラリを使用していないため、タイピング指を保存するために、IDおよび出力ステータスメッセージで要素を返すためにいくつかのヘルパー関数を作成します。

ファイルAPIが利用可能かどうかを確認し、init（）関数を呼び出します：

// 通过ID获取元素
function $id(id) {
    return document.getElementById(id);
}

// 输出信息
function Output(msg) {
    var m = $id("messages");
    m.innerHTML = msg + m.innerHTML;
}

ログイン後にコピー

init（）関数：1。ファイル入力要素の「変更」イベントリスナーを設定します。 2. #filedrag要素を表示します。 3.「Dragover」および「Dragleave」イベントリスナーを設定して、#FileDrag要素のスタイルを変更します。 4. #FileDrag要素の「ドロップ」イベントリスナーを設定します。 5。フォーム送信ボタンを非表示 - 選択したファイルを分析してアップロードするため、必要ありません。

ファイルのドラッグアンドドロップをサポートするときに、ファイル入力要素を非表示にすることができます。個人的には、ドラッグアンドドロップがユーザビリティの問題をもたらすため、両方のオプションを提供することを好みます。 xmlhttprequest.uploadメソッドチェックは、オペラの問題を防ぐことができます。ブラウザはファイル、FilleRist、およびFileReaderをサポートしていますが、ドラッグアンドドロップイベントまたはXMLHTTPREQUEST2をサポートしていません。そのため、ファイル情報を表示できますが、#FiledRag要素を表示したり、送信ボタンを削除したりしたくありません。

// 调用初始化文件
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";
    }

}

ログイン後にコピー

ファイルドラッグアンドドロップスタイルの変更

一部の人々は、Webブラウザーでファイルのドラッグアンドドロップを経験しています。実際、経験豊富なWebユーザーはこれが不可能だと思うかもしれません。そこで、「ここにファイルをドラッグアンドドロップする」と宣言する要素を使用しました。また、スタイルを変更して、ファイルを#FileDRAGの場所にドラッグアンドドロップするタイミングを示したいと思います。

ドラッグアンドドロップまたは選択したファイルを分析します

// 文件拖放悬停
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}

ログイン後にコピー

「閲覧」を使用して1つ以上のファイルを選択するか、#FileDRAGの場所にファイルをドラッグアンドドロップするかどうかにかかわらず、同じfilesElectHandler（）関数を使用します。

この関数：1。FileDragHover（）を呼び出して、Hoverスタイルを削除し、ブラウザイベントをキャンセルします。これは非常に重要です。そうしないと、ブラウザがファイルを表示しようとする場合があります。 2。フィルリストオブジェクトを取得します。これは、ファイル入力ボックス（e.target.files）または#filedrag要素（e.datatransfer.files）からのものです。 3.最後に、ファイルリスト内のすべてのファイルオブジェクトを介して関数がループし、parsefile（）関数のパラメーターとしてそれらを渡します...

<fieldset><legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div>

ログイン後にコピー

この関数は、ファイルオブジェクトによって提供された3つの主要な読み取り専用属性を使用して出力情報を出力します。 - .size：ファイルサイズ（バイト）。

Firefox、Chrome、またはOperaのデモページをご覧ください（ドラッグアンドドロップサポートなし）。ファイルをダウンロードしてコードを確認することもできます。私たちはたくさんカバーしました。私の次の投稿では、html5とjavascriptを使用してドラッグアンドドロップファイルを開く方法について
…この記事は、あなたが好きな場合はアルメニア人に翻訳されています。この記事を読むと、学習可能な場所が大好きです。メンバーは、現実世界のHTML5やCSS3など、すべてのSetePointの電子書籍とインタラクティブなオンラインコースに即座にアクセスできます。この記事のコメントは閉じられています。 HTML5について質問はありますか？フォーラムで質問してみませんか？ HTML5ファイルのドラッグアンドドロップに関するfaq * （記事の長さのために、次のFAQパーツは省略されています。必要に応じて、FAQパーツの翻訳を個別にリクエストできます。）
以上がHTML5ファイルのドラッグアンドドロップの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。