-3

ファイルの名前を取得するための Web サイトでこれを見つけたので、以下のコードがどのように機能するかを知りたいのですが、それがどのように機能するかを完全には理解していません。

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>
4

1 に答える 1

1

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

それでは、これを分解しましょう。

function handleFileSelect(evt) {

関数がリスナーとしてイベントにバインドされると、通常、そのイベントを表すオブジェクトが渡されます。これは、evtこのイベント ハンドラー関数によって受け入れられる変数です。

var files = evt.target.files;

DOM イベントの場合、通常、イベント オブジェクトには、targetイベントをトリガーした DOM 要素への参照であるというプロパティがあります。evt.targetファイル入力要素を返します。

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

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

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

于 2012-04-17T00:43:13.260 に答える