通过 JavaScript 获取文档中文件上传的文件名

IT技术 javascript file-upload
2021-02-24 18:53:35
var fu1 = document.getElementById("FileUpload1");

如何获取文件上传控件的文件名id FileUpload1

6个回答

在 google chrome element.value 中返回名称 + 路径,但是一个假路径。因此,就我而言,我在文件上使用了 name 属性,如下所示:

function getFileData(myFile){
   var file = myFile.files[0];  
   var filename = file.name;
}

这是来自页面的调用:

<input id="ph1" name="photo" type="file" class="jq_req" onchange="getFileData(this);"/>
其他人注意:对于 IE11,这并没有为我返回任何东西。
2021-04-25 18:53:35

试试这个value属性,像这样:

var fu1 = document.getElementById("FileUpload1");
alert("You selected " + fu1.value);

注意:它看起来像是FileUpload1一个 ASP.Net 服务器端 FileUpload 控件。
如果是这样,您应该使用该ClientID属性获取其 ID ,如下所示:

var fu1 = document.getElementById("<%= FileUpload1.ClientID %>");

要仅获取上传的文件名称,请使用此方法,

fake_path=document.getElementById('FileUpload1').value
alert(fake_path.split("\\").pop())

FileUpload1 value 包含您可能不想要的假路径,以避免使用 split 和 pop 文件中的最后一个元素。

接受的答案很好。但是如果您需要没有假路径的文件名以便在提取/发布或按钮标签等中重用,这是完美的,
2021-04-30 18:53:35

试试document.getElementById("FileUpload1").value这个值应该有一个要上传的文件的路径,只需从该值中删除所有目录,你就会有文件名。

RaYell,您不需要解析返回的值。 document.getElementById("FileUpload1").value仅返回带扩展名的文件名。这对我很有用,因为我想将要上传的文件的名称复制到名为“标题”的输入框。在我的应用程序中,上传的文件被重命名为后端数据库生成的索引,标题存储在数据库中。