HTML5 を使用して非同期ファイル アップロード関数を実装するコード例

この記事では、ファイルの非同期アップロードを実装するための 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

<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

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