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

コアポイント

• HTML5は、Webページ要素にファイルのドラッグとドロップをサポートし、JavaScriptのドラッグアンドドロップファイルを分析し、クライアントにファイルをロードおよび解析し、XMLHTTPREQUEST2を使用してファイルをサーバーにアップロードし、アップロード中にグラフィカルな進(jìn)行狀況を表示します。
最新のHTML5テクノロジーを使用しているため、ブラウザのサポートは不均一になる場(chǎng)合があります。 FirefoxおよびChromeの現(xiàn)在のバージョンはすべての機(jī)能をサポートしていますが、Opera、IE、およびSafariサポートは限られているか、まったくサポートされていません。
ファイルのドラッグアンドドロップを有効にするには、JavaScriptイベントをファイル入力要素と#FileDRAG要素に添付する必要があります。 #FileDRAG要素も表示され、フォーム送信ボタンを非表示にする必要があります。
W3CファイルAPIは、FileList、File、およびFileReaderを含むファイル操作、および選択したファイル、個(gè)々のファイルを表し、クライアントのファイルデータをそれぞれ読み取り、そのインターフェイスを使用するオブジェクトを提供します。

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

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

開始前に、このチュートリアルには最新のHTML5テクノロジーの一部が含まれるため、サポートは不均一になると予想されます。コードは現(xiàn)在動(dòng)作しますが、APIが変更され、ブラウザが進(jìn)化し続けています。 -FirefoxとChromeの最新バージョンは、すべての機(jī)能をサポートし、完全に実行します。 -OperaはJavaScriptでファイルを解析できますが、ファイルのドラッグアンドドロップとXMLHTTPREQUEST2アップロードを?qū)g裝しません。 -IEおよびSafariのデスクトップバージョンは、APIをサポートしていません。 -Appleは、iPhoneおよびiPadバージョンのSafariにHTMLファイルアップロードフォームを無効にしています。

誰かが理由を知っていますか？

最後に、私のコードが基本概念を示していることに注意してください。エラーチェックは非常に少ないため、生産システムを調(diào)整する必要があります。

htmlおよびcss

これは、ファイル入力タイプの標(biāo)準(zhǔn)フォームです。唯一のHTML5機(jī)能は「複數(shù)の」プロパティで、ユーザーは任意の數(shù)のファイルを選択できるようにします。 PHPを?qū)g行しているサーバーにファイルをアップロードしますが、コードはどのテクノロジーを使用してもほぼ同じです。 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">或?qū)⑽募戏诺酱颂?lt;/div>
</div>
<input type="submit" value="上傳文件" id="submitbutton">
</fieldset>
<div id="messages">狀態(tài)信息</div>

ファイルドラッグアンドドロップの場(chǎng)所としてFileDrag要素が使用されます。この要素はCSSに隠されていますが、ドラッグアンドドロップがサポートされている場(chǎng)合、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クラスも定義します。ブラウザは適用されません。この場(chǎng)合はホバースタイルですが、イベントが発生した場(chǎng)合、JavaScriptを使用してクラスを追加できます。

ファイルapi

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

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

ファイルAPIが利用可能かどうかを確認(rèn)し、init（）関數(shù)を呼び出します：

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

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

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

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

// 調(diào)用初始化文件
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の場(chǎng)所にドラッグアンドドロップするタイミングを示したいと思います。

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

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

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

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

<fieldset><legend>HTML文件上傳</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">選擇要上傳的文件：</label>
  <div id="filedrag">或?qū)⑽募戏诺酱颂?lt;/div>
</div>
<input type="submit" value="上傳文件" id="submitbutton">
</fieldset>
<div id="messages">狀態(tài)信息</div>

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

Firefox、Chrome、またはOperaのデモページをご覧ください（ドラッグアンドドロップサポートなし）。ファイルをダウンロードしてコードを確認(rèn)することもできます。私たちはたくさんカバーしました。私の次の投稿では、html5とjavascriptを使用してドラッグアンドドロップファイルを開く方法について

…この記事は、あなたが好きな場(chǎng)合はアルメニア人に翻訳されています。この記事を読むと、學(xué)習(xí)可能な場(chǎng)所が大好きです。メンバーは、現(xiàn)実世界のHTML5やCSS3など、すべてのSetePointの電子書籍とインタラクティブなオンラインコースに即座にアクセスできます。この記事のコメントは閉じられています。 HTML5について質(zhì)問はありますか？フォーラムで質(zhì)問してみませんか？ HTML5ファイルのドラッグアンドドロップに関するfaq * （記事の長(zhǎng)さのために、次のFAQパーツは省略されています。必要に応じて、FAQパーツの翻訳を個(gè)別にリクエストできます。）

以上がHTML5ファイルのドラッグアンドドロップの使用方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。