コアポイント

• HTML5とAJAXを使用してファイルを非同期にアップロードすることをバックグラウンドで実行でき、ユーザーはアップロード中にページ上で他のタスクを?qū)g行できます。このプロセスでは、HTMLフォームを作成してPHPページにファイルをアップロードし、JavaScriptは300,000バイト未満のJPG畫像のみがアップロードされることを保証します。
• JavaScriptのアップロード関數(shù)には、XMLHTTPREQUEST2オブジェクト（FireFoxおよびChromeで使用可能）が必要です。 XMLHTTPREQUESTの.Open（）メソッドは、データをPHPページに投稿し、HTTPヘッダーをファイルの名前に設(shè)定し、ファイルオブジェクトを.send（）メソッドに渡すように設(shè)定されています。
• PHPファイルは、X_FILENAME HTTPヘッダーをチェックして、AJAXリクエストと標(biāo)準(zhǔn)フォームポストを區(qū)別します。ファイル名が設(shè)定されている場(chǎng)合、PHPは公開されたデータを取得し、「アップロード」フォルダーの新しいファイルに出力します。標(biāo)準(zhǔn)のHTMLマルチパート/フォームデータポストは、通常のPHP $ _FILE関數(shù)を使用して処理されます。

以前の記事では、HTML5を使用してファイルをドラッグアンドドロップする方法と、HTML5とJavaScriptを使用してファイルを開く方法を?qū)Wびました。これで、各ファイルをサーバーにアップロードできる有効なファイルセットがあります。このプロセスはバックグラウンドで非同期に行われるため、ユーザーはプロセスが進(jìn)行するにつれてページ上の他のタスクを完了できます。

html

HTMLフォームをもう一度確認(rèn)しましょう：

<fieldset><legend>HTML文件上傳</legend><div> <label for="fileselect">要上傳的文件：</label> <div>或在此處拖放文件</div></div><div>上傳文件</div></fieldset>

PHPページupload.phpにファイルをアップロードします。ユーザーが「ファイルのアップロード」をクリックすると、ページはAjaxアップロードリクエストと標(biāo)準(zhǔn)フォーム投稿を処理します。 JavaScriptは、JPG畫像のみが300,000バイト未満でアップロードされることを保証します（max_file_sizeで指定された値）。

javascript

最初に、1つ以上のファイルを選択またはドラッグしてドロップするときに呼び出されたFilesElectHandler（）関數(shù)に行を追加する必要があります。ファイルループでは、別の関數(shù)を呼び出します - uploadfile（）：

// 文件選擇
function FileSelectHandler(e) {

    // 取消事件和懸停樣式
    FileDragHover(e);

    // 獲取FileList對(duì)象
    var files = e.target.files || e.dataTransfer.files;

    // 處理所有File對(duì)象
    for (var i = 0, f; f = files[i]; i++) {
        ParseFile(f);
        UploadFile(f);
    }

}

ファイルアップロードには、現(xiàn)在FirefoxおよびChromeで利用可能なXmlhttpRequest2オブジェクトが必要です。 AJAX呼び出しを行う前に、.upload（）メソッドが利用可能であり、MAX_FILE_SIZEフォーム値よりも小さいファイルサイズのJPGがあることを確認(rèn)してください：

// 上傳JPEG文件
function UploadFile(file) {

    var xhr = new XMLHttpRequest();
    if (xhr.upload && file.type == "image/jpeg" && file.size < $id("MAX_FILE_SIZE").value) {

        // 開始上傳
        xhr.open("POST", $id("upload").action, true);
        xhr.setRequestHeader("X_FILENAME", file.name);
        xhr.send(file);

    }

}

xmlhttprequestの.open（）メソッドは、upload.php（uploadフォームのアクションプロパティ）にデータを投稿するように設(shè)定されています。さらに、HTTPヘッダーをファイルの名前に設(shè)定し、ファイルオブジェクトを.send（）メソッドに渡します。

php

PHPファイルupload.phpは、X_FILENAME HTTPヘッダーをチェックして、AJAXリクエストと標(biāo)準(zhǔn)フォームの投稿を區(qū)別します。

<?php $fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false); ?>

ファイル名が設(shè)定されている場(chǎng)合、PHPは公開されたデータを取得し、「アップロード」フォルダーの新しいファイルに出力できます。驚くべきことに、これは単一のコードで達(dá)成できます：

if ($fn) {

    // AJAX調(diào)用
    file_put_contents(
        'uploads/' . $fn,
        file_get_contents('php://input')
    );
    echo "$fn 上傳成功";
    exit();

}

標(biāo)準(zhǔn)のHTMLマルチパート/フォームデータポストは、通常のPHP $ _FILE関數(shù)を使用して処理できます：

<fieldset><legend>HTML文件上傳</legend><div> <label for="fileselect">要上傳的文件：</label> <div>或在此處拖放文件</div></div><div>上傳文件</div></fieldset>

デモページを表示できますが、PHPサポートなしでサーバーでホストされていることに注意してください。アップロードは発生しません。ファイルをダウンロードしてコードを確認(rèn)し、獨(dú)自のPHPサーバーにインストールしてください。

上記のコードは機(jī)能しますが、ユーザーはファイルのアップロードが開始、完了、または故障のかどうかを知りません。このシリーズの最後の號(hào)を読む必要があります：HTML5とJavaScriptのプログレスバーをアップロードするファイルを作成する方法

についての

FAQ（FAQ） （この部分は擬似オリジナルの目標(biāo)とは関係がなく、長(zhǎng)いため、FAQパーツは省略されています。FAQを保持することは問(wèn)題ありませんが、言語(yǔ)を再編成する必要があります。記事。）

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