ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 FileAPI グラフィックおよびテキストコードの共有

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

黄舟オリジナル: 2017-03-28 16:00:281731ブラウズ

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

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 までご連絡ください。

前の記事：html5 Canvasの基本機能をサンプルコードで共有次の記事：html5 Canvasの基本機能をサンプルコードで共有

続きを見る

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

関連記事

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