html:file

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- html:file [2023/04/20 09:54] – 削除 nullpon
+++ html:file [2023/04/20 09:58] (現在) – 作成 nullpon
@@ 行 1: / 行 1: @@
+<markdown>
+# File API
+File APIはブラウザ上でファイルを扱うためのAPI仕様。
+以下の2通りの方法でファイルを取得できる
+* type=fileのinput要素からデスクトップのファイルにアクセス
+* ドラッグアンドドロップAPIでデスクトップからドロップしたファイルにアクセス
+古いAPIなのでPromiseではなくコールバックになっているのが残念
+## FileReader
+ファイルの中身はFileReaderオブジェクトを使って非同期読み込みできる。
+```javascript
+$(function(){
+    $("#inputFile").change(function(){
+        var file = this.files[0];
+        if (file) {
+            $("#fileName").text(file.name);
+            $("#fileSize").text(file.size);
+            $("#fileType").text(file.type);
+        }
+        if (file.type.match(/text/)) {
+            var fr = new FileReader()
+            fr.onload = function(event){
+                $("#textViewer").text(event.target.result);
+            };
+            fr.readAsText(file, "utf-8");
+        }
+    });
+});
+```
+</markdown>

html/file.1681984462.txt.gz · 最終更新: 2023/04/20 09:54 by nullpon