H5で画像アップロードプレビューコンポーネントを作成する方法-jsチュートリアル-php.cn

H5で画像アップロードプレビューコンポーネントを作成する方法

php中世界最好的语言

リリース： 2018-03-10 16:19:42

オリジナル

2093 人が閲覧しました

今回は、H5 で画像アップロードプレビューコンポーネントを作成する方法を説明します。H5 で画像アップロードプレビューコンポーネントを作成する際の注意点は何ですか?実際のケースを見てみましょう。

私の開発環境はWindows 10で、テストブラウザはChromeとFirefoxです

互換性のないブラウザに遭遇した場合は、ブラウザをアップグレードするか、Googleで試してみてください(￣￣▽￣)~

1の単一選択と複数選択。ファイル

デフォルトでは、は単一の選択です。複数の属性を追加すると、複数のファイルの選択が可能になります

2. ファイルオブジェクトを取得します

;コンソールの変更を確認するためのファイル

3. よく使用される属性

2 番目のステップでは、コンソール内のファイルを展開して、どのような共通の属性があるかを確認してみましょう

よく使用される属性の説明:

name -ファイル名
サイズ-サイズ
タイプ-ファイルタイプ
lastModified-最終更新日

さあ、ページに情報を出力してみましょう

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <label>单选:<input type="file"/></label>
        <label>多选:<input type="file" multiple="multiple"/></label>
    </body></html>

ログイン後にコピー

4. ファイルサイズとファイル形式を制限します

プレビューをアップロードするとき画像の場合は、ファイルをアップロードする必要があります。サイズと形式でフィルタリングします。現在、アップロードできるのは jpg と png で、ファイルのサイズが 2mb 以内であるとします。フィルターしたいファイルの種類をコンソールで表示し、入力してコピーして貼り付けます

もちろん、input タグに accept="image/*" を設定して画像ファイルの入力のみを許可することもできます

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body> 
        <label>可以这样:<input type="file" multiple="multiple" onchange="getFilesInfo(this.files)"/></label>
        <script>
            function getFilesInfo(f){                console.log(f);
            }        </script>
        <label>也可以这样:<input id="files" type="file" multiple="multiple" /></label>
        <script>
            function getFilesInfo2(evt) {                var files = evt.target.files; 
                console.log(files);
            }            document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, getFilesInfo2, false);        </script>
        <label>还可以这样:<input id="fileInput" type="file" multiple="multiple" onchange="getFilesInfo3()"/></label>
        <script>
            function getFilesInfo3(){                var files=document.getElementById("fileInput").files;                console.log(files);
            }        </script>
    </body></html>

ログイン後にコピー

5. プレビュー例

imgタグを動的に作成し、imgタグのsrc属性をバインドすることで実装プレビュー

例

<!doctype html><html>
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <input type="file" id="files"  multiple />
        <output id="list"></output>
        <script>
            function handleFileSelect(evt) {                var files = evt.target.files; //如果你是单选那就直接evt.target.files[0]
                var output = []; 
                for(var i = 0, f; f = files[i]; i++) {
                    output.push(&#39;<li><strong>&#39;, f.name, &#39;</strong> (&#39;, f.type || &#39;n/a&#39;, &#39;) - &#39;,
                        f.size, &#39; bytes, last modified: &#39;,
                        f.lastModifiedDate.toLocaleDateString(), &#39;</li>&#39;);
                }                document.getElementById(&#39;list&#39;).innerHTML = &#39;<ul>&#39; + output.join(&#39;&#39;) + &#39;</ul>&#39;;
            } 
            document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, handleFileSelect, false);        </script>
    </body> </html>

ログイン後にコピー

6. 単一画像アップロードのプレビュー例

例

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h3>过滤出图片</h3>
        <input type="file" id="files"   multiple accept="image/*"  />
        <output id="list"></output> 
        <script>
            function handleFileSelect(evt) {                var files = evt.target.files;                var output = [];                for(var i = 0, f; f = files[i]; i++) {                    if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里
                        output.push(&#39;<li><strong>&#39;, f.name, &#39;</strong> (&#39;, f.type || &#39;n/a&#39;, &#39;) - &#39;,
                        f.size, &#39; bytes, last modified: &#39;,
                        f.lastModifiedDate.toLocaleDateString(), &#39;</li>&#39;);
                    }
                }                document.getElementById(&#39;list&#39;).innerHTML = &#39;<ul>&#39; + output.join(&#39;&#39;) + &#39;</ul>&#39;;
            } 
            document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, handleFileSelect, false);        </script>
    </body> </html>

ログイン後にコピー

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