HTML5 type=file ファイルアップロード機能

この記事では、HTML5 の新機能である type=file ファイルのアップロード機能を中心に紹介しますので、必要な方は参考にしていただければ幸いです。

1. 構文

2. 属性 (次の 3 つは HTML5 でのみサポートされているため、互換性の問題があります)

(1) 複数:ユーザーが複数の値を選択できるかどうかを示します。 Multiple は、type=file および type=email でのみ使用できます。

(2) accept: サーバーによって受け入れられたファイルタイプ。それ以外の場合は無視されます。

audio/* はサウンド ファイルを表します。 HTML5 でのみサポートされています
Video/* はビデオ ファイルを表します。 HTML5 でのみサポートされています
Image/* は画像ファイルを表します。 HTML5 でのみサポートされます

(3) 必須: この属性は、ユーザーがフォームを送信する前に値を入力する必要があることを指定します。

3. アップロードされたファイル情報を取得します

nbsp;html>

    
        <meta>
        <meta>
        <title>file multiple</title>
    
    
        <input>
        <p></p>
        <script>
            var test = document.getElementById(&#39;test&#39;);
            test.addEventListener(&#39;change&#39;, function() {
                var t_files = this.files;
                var str = &#39;&#39;;
                for(var i = 0, len = t_files.length; i < len; i++) {
                    console.log(t_files[i]);
                    str += &#39;<a href="javascript:void(0)">&#39; + t_files[i].name + &#39;<br/>&#39;;
                };
                document.getElementById(&#39;content&#39;).innerHTML = str;
            }, false);
        </script>
    

表示:

関連推奨事項:

HTML5 type=file ファイルアップロード関数の例の詳細な説明

input[type=file] が開くのが遅くフリーズする問題の解決策

jQueryはinput type=fileの実装コードを動的に追加します

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