htmlアップロード

HTML 実装のアップロード
Web アプリケーションでは、ファイルのアップロードは非常に一般的な要件です。以前の従来の Web アプリケーションでは、ファイルのアップロードの実装には複雑なサーバー側プログラミングとさまざまな拡張ライブラリのインストールが含まれており、開発者に多くの手間をもたらしていました。しかし、HTML5 テクノロジの継続的な開発により、ブラウザベースのファイルのアップロードはますます簡単になりました。この記事では、HTML5を使用してファイルアップロード機能を実装する方法を紹介します。

HTML5 でのファイルのアップロード
HTML5 では、HTML フォーム送信機能を使用してファイルのアップロードを行うことができます。たとえば、次の HTML フォームでは POST メソッドを使用してファイルをアップロードできます:

413e8c7ab7df39652d13f936dc60528a

<input type="file" name="file">
<input type="submit" value="上传">

f5a47148e367a6035fd7a2faa965022e

上記のフォームでは、enctype="multipart/form-data" を使用してフォームのエンコード タイプを指定し、multipart/form- のエンコード方法を使用します。ファイルをアップロードするときのデータ。また、type="file" の input 要素を使用してファイルアップロード機能も実装します。

JavaScript を使用したファイルのアップロード
ファイル アップロード フォームと送信リクエストは、JavaScript を使用して動的に生成できます。たとえば、次の JavaScript 関数は、フォームを動的に生成し、ファイル アップロード リクエストを送信できます:

function UploadFile(file, url, callback) {

var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('file', file);
xhr.open('POST', url, true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        callback(xhr.responseText);
    }
};
xhr.send(formData);

}

Inこの JavaScript 関数では、XMLHttpRequest オブジェクトを使用して POST リクエストを送信し、ファイル データを FormData オブジェクトに入れます。リクエストが返されると、コールバック関数を呼び出して、サーバー側で応答結果を処理します。

jQuery を使用したファイル アップロードの実装
JavaScript に加えて、jQuery ライブラリを使用してファイル アップロード機能を実装することもできます。たとえば、次の jQuery 関数は、Ajax を通じてファイル アップロード リクエストを送信できます。

function UploadFile(file, url, callback) {

var formData = new FormData();
formData.append('file', file);
$.ajax({
    url: url,
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function (data, textStatus, jqXHR) {
        callback(data);
    }
});

}

この jQuery 関数では、では、$.ajax 関数を使用して POST リクエストを送信し、ファイル データを FormData オブジェクトに入れます。 processData と contentType を false に設定すると、jQuery ライブラリはフォーム データのシリアル化を支援できなくなりますが、FormData オブジェクトをサーバーに直接送信します。リクエストが返されると、コールバック関数を呼び出して、サーバー側で応答結果を処理します。

まとめ
この記事では、HTML5 テクノロジーを使用して、フォーム フォームまたは JavaScript と jQuery を使用して実装できるファイル アップロード機能を実装する方法を紹介しました。どの方法を使用しても、以前の従来のアップロード方法よりも便利、簡単、高速です。 Webアプリケーション開発ではファイルアップロード機能が標準機能の一つとなっており、ファイルアップロードの実装方法をマスターすることで開発効率を向上させることができます。

以上がhtmlアップロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。