HTML5とAJAXを使用してファイルを非同期にアップロードする方法

コアポイント

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

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

html

HTMLフォームをもう一度確認しましょう：

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

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

javascript

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

// 文件选择
function FileSelectHandler(e) {

    // 取消事件和悬停样式
    FileDragHover(e);

    // 获取FileList对象
    var files = e.target.files || e.dataTransfer.files;

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

}

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

// 上传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フォームのアクションプロパティ）にデータを投稿するように設定されています。さらに、HTTPヘッダーをファイルの名前に設定し、ファイルオブジェクトを.send（）メソッドに渡します。

php

PHPファイルupload.phpは、X_FILENAME HTTPヘッダーをチェックして、AJAXリクエストと標準フォームの投稿を区別します。

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

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

if ($fn) {

    // AJAX调用
    file_put_contents(
        'uploads/' . $fn,
        file_get_contents('php://input')
    );
    echo "$fn 上传成功";
    exit();

}

標準のHTMLマルチパート/フォームデータポストは、通常のPHP $ _FILE関数を使用して処理できます：

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

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

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

についての

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

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