HTML5 による非同期ファイルアップロード機能の実装方法の分析例

この記事では、Html5のFormDataを使用してファイルの非同期アップロードを実現する方法を簡単に紹介します。また、アップロードプログレスバーやファイルサイズの検証なども実装できます。コードはシンプルで理解しやすいです。非常に優れており、参考値が必要です。お友達、ぜひ参考にしてください

1 はじめに

ファイルアップロード機能の開発は、特に私が使用した非同期アップロードでは決して楽しいものではありません。 iframe と Flash アップロード ソリューションはどれも非常にぎこちなく感じられました。この記事では、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

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