非同期ファイルのアップロードを完了するための HTML Jquery コードの例

この記事では、ファイルの非同期アップロードを実装するための Html5 の FormData の使用方法を簡単に紹介します。このコードはシンプルで理解しやすく、非常に優れており、必要とする友人にとっては参考になります。参考にしてください

1 はじめに

ファイルのアップロード機能の開発は、特に非同期アップロードのソリューションを使用したことがありますが、どれも非常にぎこちないものです。この記事では、Html5 の FormData を使用してファイルの非同期アップロードを実装する方法を簡単に紹介します。また、アップロードの進行状況バーやファイル サイズの検証も実装できます。サーバーは処理に springMVC ソリューションを使用します。

2 Htmlコード

<form id="myForm">
    <input type="file" id="u_photo" name="u_photo" />
    <input type="button" id="submit-btn" value="上传" />
</form>

3 JQueryアップロード

$("#submit-btn").on('click', function() {
    $.ajax({
        url:"/test/upload",
        type:"post",
        data:new FormData($("#myForm").get(0)),
        //十分重要，不能省略
        cache: false,
        processData: false,
        contentType: false,
        success: function () {
            alert("上传成功！");
        }
    });
});

4 JQueryファイルサイズ検証

ファイルサイズと対応する動作コントロールが必要ですに基づいて処理する必要があるこの方法は一例にすぎません。

$('#u_photo').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024*1000) {
        alert('文件最大1M！')
    }
});

5 JQuery プログレスバー

アップロードの進行状況を制御するには、ajax メソッドに xhr を追加します。プログレス バーは、HTML5 のプログレス バーまたは 他の プログレス バーを使用できます。プログレス バーの表示と非表示は自分で処理する必要があります。この方法では、プログレス バーの基本的な制御を簡単に紹介するだけです。

xhr: function() {
    var myXhr = $.ajaxSettings.xhr();
    if (myXhr.upload) {
        myXhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                $('progress').attr({
                    value: e.loaded,
                    max: e.total,
                });
            }
        } , false);
    }
    return myXhr;
}

6 springMVCサーバー

6.1 mavenの依存関係

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.5</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.2</version>
</dependency>

6.2 servlet-context.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

6.3 コントローラー

のサンプルプログラム、および文書の検証、保管、および対応するコード加工用に。

@RequestMapping(value="/test/upload",method = RequestMethod.POST)
@ResponseBody
public String upload(@RequestParam("u_photo") MultipartFile u_photo) {
    System.out.println("u_photo="+u_photo.getSize());
    return "ok";
}

7 互換性

IE 10+、Firefox 4.0+、Chrome 7+、Safari 5+、Opera 12+

8 推奨読書

上記の解決策に満足できない場合次のソリューションを使用することをお勧めします:

JQuery File Uploader

【関連する推奨事項】

1. HTML 無料ビデオチュートリアル

2. HTTP ヘッダーの知識ポイントの図による説明

3. Html5 データリストタグの詳細な説明とバックグラウンド データとの動的マッチング

4. HTML と CSS の知識ポイントの超包括的な概要を共有します

5. nodejs で HTML を解析する方法を教えます

以上が非同期ファイルのアップロードを完了するための HTML Jquery コードの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。