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 プログレスバー

アップロードの進行状況を制御するために、xhr を ajax メソッドに追加します。プログレス バーは、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";
}

E兼7 互換性

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

8 推奨読書

満足している場合は、以下を使用することをお勧めします解決策: JQuery ファイル アップローダー

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