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变量。

var files = evt.target.files;

对于DOM事件，事件对象通常具有名为target的属性，该属性是对触发事件的DOM元素的引用。所以evt.target返回文件输入元素。

文件输入元素有一个名为files的属性，它是用户选择的文件对象数组（请注意，可能只选择了一个文件，但它仍然只是一个数组一项）。该行将该数组分配给files局部变量。

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

localStorage是作为HTML5的一部分引入的持久性键值存储（有点像cookie）。 "fname"是我们存储值的关键。 files[0].name获取第一个文件对象，并返回其name属性，有效地获取所选文件的名称。然后存储该值，这样即使您刷新页面，也可以通过运行localStorage["fname"]

来回读最后选择的文件名。

下面的代码是什么意思？

1 个答案: