HTML5では、ファイル操作に関するAPIが提供されており、このAPIにより、Webページからローカルのファイルシステムにアクセスする関連処理が非常に簡単になります。今のところ、一部のブラウザのみがサポートしています。
1.FileListobjectとFile object
FileListオブジェクトは、HTML4ではファイルコントロールに配置できるファイルは1つだけですが、HTML5ではユーザーが選択したファイルのリストを表します。 、 multiple 属性を追加することで、ファイル制御は内部で複数のファイルを許可します。コントロール内でユーザーが選択した各ファイルはファイル オブジェクトであり、FileList はこれらのファイル オブジェクトのリストであり、ユーザーが選択したすべてのファイルを表します。ファイル オブジェクトには 2 つの属性があります。1 つは name で、ファイル名にファイルのパスが含まれていないことを意味します。もう 1 つは lastModifiedDate で、ファイルが最後に変更された日付を意味します。<!DOCTYPE html> <html> <head> <meta charset='UTF-8'/> <title>FileList and File </title> <script type="text/javascript" language="JavaScript"> function showFiles(){ var file, len = document.getElementById('file').files.length;//返回FileList文件列表对象 for (var i=0; i < len; i++) { file = document.getElementById('file').files[i]; alert(file.name); }; } </script> </head> <body> <input type="file" id='file' multiple="multiple" width="80px"/> <input type="button" id="bt1" value="click" onclick="showFiles();"/> </body> </html>
Blob オブジェクトの 2 つの属性、size: オブジェクトのバイト長を表します。 type: オブジェクトの MIME タイプを表します。不明なタイプの場合は、空の string
が返されます。function showFileInfo(){ var file = document.getElementById('file').files[0]; var size = document.getElementById('fileType'); var type = document.getElementById('fileSize'); size.innerHTML = file.size; type.innerHTML = file.type; }
画像タイプのファイルの場合、Blob オブジェクトの type 属性は image/ で始まり、この機能を使用してユーザーが選択したファイルの種類を決定できます。
function showFileInfo(){ var file = document.getElementById('file').files[0]; if(checkImage(file)){ var size = document.getElementById('fileType'); var type = document.getElementById('fileSize'); 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; }
ファイルの読み取り
に使用され、1つはファイルの読み取りを中断するために使用されます。説明 | readAsBinaryString() | |
ファイルをバイナリ文字列として読み取り、通常はバックエンドに渡します。バックエンドはこの文字列を渡すことができます ファイルを保存します | readAsDataURL() | |
は、ファイルをデータ URL 文字列として読み取ります。実際には、URL アドレスの特別な形式で小さなファイルをページに直接読み取ります。小さなファイルは通常、画像や HTML などの形式のファイルを指します。 | readAsText() | |
は、ファイルをテキストとして読み取ります。ここで、2 番目のパラメーターはテキストのエンコーディングです。 | abort() | |
読み取り操作を中止します。 |
Events
FileReaderインターフェースは、ファイルの読み取り時にステータスをキャプチャするためのイベントモデルの完全なセットを提供します。
onabort | |
onerror | |
onloadstart | |
3.3 例 | りー |
以上がHTML5 FileAPI グラフィックおよびテキスト コードの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。