以下のコードは何を意味していますか？

Question

私は、ファイルの名前を取得するためのウェブサイト上でこれを見つけたが、私は完全にそれがどのように動作するか理解していないので、私は仕事下記のコードがするん方法を知りたい：

function handleFileSelect(evt) { 
    var files = evt.target.files; 
    localStorage["fname"] = files[0].name; //save the name for future use 
} 

は正しい上記のコードです以下のようなフォームのコードのために：

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' > 
    <p><input name='fileImage' type='file' class='fileImage' /></p> 
<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form> 

Answer 1

その関数がバインドされている、おそらくそのファイル入力フィールドのchangeイベントにバインドされています。

だからこれを打ち破ろう。関数はイベントにリスナーに渡されるイベントを表し、典型的にはオブジェクトとして結合さ

function handleFileSelect(evt) { 

。これは、このイベントハンドラ関数によって受け入れevt変数されています。 DOMイベントの場合

var files = evt.target.files; 

、イベントオブジェクトは、一般的にイベントを発生させたDOM要素への参照ですtargetと呼ばれる性質を持っています。したがって、evt.targetはファイル入力要素を返します。

ファイル入力要素にはfilesという名前のプロパティがあります。これはユーザーが選択したファイルオブジェクトの配列です（ファイルは1つしか選択できませんが、1つの項目だけの配列になります） 。その行はその配列をローカル変数filesに割り当てます。

localStorage["fname"] = files[0].name; 

localStorage

HTML5の一部として導入（みかんクッキーなど）永続キー値ストアです。 "fname"は、値を格納するキーです。 files[0].nameは最初のファイルオブジェクトを取得し、nameプロパティを返し、選択したファイルの名前を取得します。この値が保存されるので、ページを更新しても、最後に選択したファイル名を実行するだけで読み取ることができます。localStorage["fname"]