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)読み取り操作を中止します。