H5ファイルの非同期アップロード

今回は H5 ファイルの非同期 アップロード について説明します。H5 ファイルの非同期アップロードの 注意事項 は何ですか。以下は実際的なケースです。見てみましょう。

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

HTML5で追加された新しいタグとは何ですか

phonegapを使用して連絡先を見つける方法

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