Open1

🟣【DOM】4.6 アップロヌドされたファむルの情報を取埗する

naonao

4.6-1 ファむル遞択ボックスから、指定されたファむルの情報を取埗しおみたしょう。
これには、files プロバティを利甚したす。

    <form>
      <label for="file">ファむル </label>
      <input id="file" type="file" multiple />//<----------③
    </form>

let input = document.querySelector("#file");
input.addEventListener(
  "change",
  function () {
    let files = input.files;//<----------①
    for (let file of files) { //<----------②
      console.log( //<----------------④
        `ファむル名${file.name} 
        皮類${file.type} 
        サむズ${file.size / 1024}KB 
        最終曎新日${new Date(file.lastModified)}`
      );//<---------------------------④
    }  //<------------------------------②
  },
  false
);

children

files プロパティ①は、戻り倀ずしおアップロヌドされたファむル矀 FileListオブゞェクトを返したす。よっお、②でもfor..ofルヌプで順にファむル Fileオブゞェクトを取り出しおいたす。
耇数のファむルを遞択するには、<input type="file">芁玠でmutiple属性を付䞎しなければならない点にも泚目です③。ただし、mutiple属性を付䞎しおいない堎合でも、filesプロバティの戻り倀はFileListオブゞェクトです。
FiIeオプゞェクトを取埗できおしたえば、あずは、そのプロバティから参照したい情報にアクセスするだけです④。以䞋に、Fileオブゞェクトで利甚できるおもなプロバティをたずめたす。

4.6-2 テキストファむルの内容を取埗する
FileReader オブゞェクトを利甚するこずで、取埗したFileオブゞェクトの内容を読み蟌むこずもできたす。
たずは、ファむルの内容がテキストである前提で、内容を読み蟌み、その結果をペヌゞに反映しおみたしょう。

    <form>
      <label for="file">ファむル </label>
      <input id="file" type="file" />
      <input id="btn" type="button" value="内容を衚瀺" />
    </form>
    <hr />
    <pre id="result"></pre>

let file = document.querySelector("#file");
let reader = new FileReader();
// 読み取り成功時に、その内容をペヌゞに反映
reader.addEventListener( //<-------------------------①
  "load",
  function () {
    document.querySelector("#result").textContent = reader.result;
  },
  false //<-----------------------------------------------------------①
);
//<---------------③
// ボタンクリックでファむルの読み取りを開始
document.querySelector("#btn").addEventListener(
  "click",
  function () {
    reader.readAsText(file.files[0], "UTF-8"); //<-----------------②
  },
  true
);

children

FileReaderオブゞェクトを利甚するには、たずloadむベントリスナヌを定矩し、ファむルの読み蟌みに成功した時に実行すべき凊理を定矩したす①。リスナヌ配䞋では、FileReader#resuItプロパティで読み蟌んだテキストにアクセスできたす。ここでは、resuItプロパティの戻り倀を、そのたた<pre id = "resuIt"芁玠に反映させおいたす。
なお、①ではむベントリスナヌを定矩しおいるだけで、ただファむルの読み蟌みを開始しおいるわけではありたせん。読み蟌みを開始するのは、readAsTextメ゜ッドの圹割です②。この䟋であれば、ポタンクリック時にreadAsTextメ゜ッドを呌び出しおいたす。

匕数 charsetの既定はUTF-8なので、サンプルであれば略蚘しおも構いたせん。

4.6-2ファむルの読み蟌みに倱敗した堎合
FieReader オブゞェクトでは、errorむベントリスナヌを登録しおおくこずで、ファむルの読み蟌みに倱敗した堎合に、゚ラヌメッセヌゞの衚瀺など、゚ラヌ凊理を実装するこずもできたす。
以䞋は、先ほどのサンプルに゚ラヌ凊理を远加した䟋です。

//゚ラヌ衚瀺を実装
reader.addEventListener(
  "error",
  function () {
    console.log(reader.error.message);
  },
  false
);

FileReader オブゞェクトのむベント
loaderrorむベントのほかにも、FileReaderオブゞェクトでは、以䞋のようなむベントが甚意されおいたす。

むベント 発生タむミング
loadstart 読み蟌みの開始時
loadend 読み蟌みの終了時成吊に関わらない
abort 読み蟌みの䞭断時
progress Blob コンテンツの読み蟌み時読み蟌み䞭に連続しお発生

4.6-4バむナリファむルの内容を取埗する
䞊蚘の䟋ず同じ芁領でバむナリファむルの内容を読み蟌むこずもできるが、省略する。

フォヌムでよく利甚するメ゜ッド
ここたでに玹介したほかにも、フォヌムにはさたざたなメ゜ッド/プロバティが甚意されおいたす。
本でこれらすべおを玹介するこずはできないので、以䞋に䞻芁なものをたずめおおきたす。接胜をおおたかに把握する手がかりにしおください。
children