HTML5 FileAPI グラフィックおよびテキストコードの共有-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 FileAPI グラフィックおよびテキストコードの共有

黄舟

Mar 28, 2017 pm 04:00 PM

HTML5では、ファイル操作に関するAPIが提供されており、このAPIにより、Webページからローカルのファイルシステムにアクセスする関連処理が非常に簡単になります。今のところ、一部のブラウザのみがサポートしています。

FileListobjectとFile object

FileListオブジェクトは、HTML4ではファイルコントロールに配置できるファイルは1つだけですが、HTML5ではユーザーが選択したファイルのリストを表します。、 multiple 属性を追加することで、ファイル制御は内部で複数のファイルを許可します。コントロール内でユーザーが選択した各ファイルはファイルオブジェクトであり、FileList はこれらのファイルオブジェクトのリストであり、ユーザーが選択したすべてのファイルを表します。ファイルオブジェクトには 2 つの属性があります。1 つは name で、ファイル名にファイルのパスが含まれていないことを意味します。もう 1 つは lastModifiedDate で、ファイルが最後に変更された日付を意味します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=&#39;UTF-8&#39;/>
        <title>FileList and File </title>
        <script type="text/javascript" language="JavaScript">
function showFiles(){
var file,
                len = document.getElementById(&#39;file&#39;).files.length;//返回FileList文件列表对象
for (var i=0; i < len; i++) {
                  file = document.getElementById(&#39;file&#39;).files[i];
                  alert(file.name);
                };
                
            }            
</script>               
    </head>
    <body>
        <input type="file" id=&#39;file&#39; multiple="multiple" width="80px"/>
        <input type="button" id="bt1" value="click" onclick="showFiles();"/>
    </body>
</html>

2. Blob オブジェクト

Blob オブジェクトというと、意味が似ている OracleDB の Blob フィールドを思い浮かべる人もいるかもしれません。 HTML5 の BLOB はバイナリの生データを表し、バイト内の生データブロックにアクセスできるスライス() メソッドを提供します。実際、上記のファイルオブジェクトは Blob オブジェクトを継承しています。

Blob オブジェクトの 2 つの属性、size: オブジェクトのバイト長を表します。 type: オブジェクトの MIME タイプを表します。不明なタイプの場合は、空の string

が返されます。

function showFileInfo(){
                var file = document.getElementById(&#39;file&#39;).files[0];
                var size = document.getElementById(&#39;fileType&#39;);
                var type = document.getElementById(&#39;fileSize&#39;);
                size.innerHTML = file.size;
                type.innerHTML = file.type;
            }

画像タイプのファイルの場合、Blob オブジェクトの type 属性は image/ で始まり、この機能を使用してユーザーが選択したファイルの種類を決定できます。

function showFileInfo(){
                var file = document.getElementById(&#39;file&#39;).files[0];
                if(checkImage(file)){
                var size = document.getElementById(&#39;fileType&#39;);
                var type = document.getElementById(&#39;fileSize&#39;);
                size.innerHTML = file.size;
                type.innerHTML = file.type;
                }
                else{
                    return ;
                }
            }
            function checkImage(file){
                if(!/img\/\w+/.test(file.type)){
                    alert(file.name + "不是图片");
                    return false;
                }
                return true;
            }

さらに、ファイルコントロールは、受け入れられるファイルの種類を制限するために HTML5 標準で accept 属性を追加します。ただし、現在、各ブラウザの位置合わせサポートは、ファイル選択ウィンドウを開いたときの画像ファイルのデフォルトの選択に限定されています。他のTypeを選択した場合も制御を受け付けます。

3.FileReaderインターフェース

3.1 インターフェースメソッド

FileReaderインターフェースは4つのメソッドを提供しており、そのうちの3つは

ファイルの読み取り

に使用され、1つはファイルの読み取りを中断するために使用されます。

メソッド名パラメータ説明readAsBinaryString()fileファイルをバイナリ文字列として読み取り、通常はバックエンドに渡します。バックエンドはこの文字列を渡すことができますファイルを保存しますreadAsDataURL()file は、ファイルをデータ URL 文字列として読み取ります。実際には、URL アドレスの特別な形式で小さなファイルをページに直接読み取ります。小さなファイルは通常、画像や HTML などの形式のファイルを指します。 readAsText()file [encoding] は、ファイルをテキストとして読み取ります。ここで、2 番目のパラメーターはテキストのエンコーディングです。 abort()(none)読み取り操作を中止します。

なお、読み込みが成功しても失敗してもメソッドは読み込み結果を返さず、結果はresult属性で返却されます。

3.2 Interface

Events

FileReaderインターフェースは、ファイルの読み取り時にステータスをキャプチャするためのイベントモデルの完全なセットを提供します。

イベント説明onabortデータの読み取りが中断されたときに発生しますonerrorデータの読み取りが失敗したときに発生しますonloadstart データ読み込み開始時に発生 3.3 例




	りー

以上がHTML5 FileAPI グラフィックおよびテキストコードの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLのH5タグは何ですか？May 09, 2025 am 12:11 AM

HTMLのH5タグは、小さいタイトルまたはサブタイトルのタグを付けるために使用される5番目のタイトルです。 1）H5タグは、コンテンツの階層を改良し、読みやすさとSEOを改善するのに役立ちます。 2）CSSと組み合わせて、スタイルをカスタマイズして視覚効果を強化できます。 3）H5タグを合理的に使用して、乱用を避け、論理コンテンツ構造を確保します。

H5コード：Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AM

HTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。

H5コード構造：読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM

合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1）コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2）FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3）レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。

H5対古いHTMLバージョン：比較May 06, 2025 am 12:09 AM

HTML5（H5）以降のバージョンのHTMLの主な違いには、次のものが含まれます。1）H5はセマンティックタグを導入し、2）マルチメディアコンテンツをサポートし、3）オフラインストレージ機能を提供します。 H5は、新しいタグやタグなどのAPIを介してWebページの機能と表現力を高め、ユーザーエクスペリエンスやSEO効果を改善しますが、互換性の問題に注意を払う必要があります。

H5対HTML5：用語と関係を明確にするMay 05, 2025 am 12:02 AM

H5とHTML5の違いは次のとおりです。1）HTML5は、構造とコンテンツを定義するWebページ標準です。 2）H5は、迅速な開発とマーケティングに適したHTML5に基づくモバイルWebアプリケーションです。

HTML5機能：H5のコアMay 04, 2025 am 12:05 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、フォームエンハンスメント、オフラインストレージ、ローカルストレージが含まれます。 1。コードの読みやすさやSEO効果を改善するなどのセマンティックタグ。 2.マルチメディアサポートは、メディアコンテンツを埋め込むプロセスとタグを簡素化します。 3.フォームエンハンスメント新しい入力タイプと検証プロパティを導入し、フォーム開発を簡素化します。 4.オフラインストレージとローカルストレージは、ApplicationCacheとLocalStorageを通じてWebページのパフォーマンスとユーザーエクスペリエンスを改善します。

H5：HTMLの最新バージョンの探索May 03, 2025 am 12:14 AM

html5isamajorrevision ofhtmlstandardthatedatedatizeizeswebdevelovement byintunwingnewsemanticelementsandcapabilities.1）itenhancesscodereadability and.2）html5EnableSricher、InteractiveEnceEnceEnceEncedienceEnceDirectembe、and.2）