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

Question

var fu1 = document.getElementById("FileUpload1");

我该如何获取id为FileUpload1的文件上传控件的文件名？

- Mishigen

Answer 1

在谷歌浏览器中，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);"/>

- vanessen

---

其他人注意：对于IE11，这在我的电脑上没有返回任何内容。 - Cordell

Answer 2

尝试使用value属性，像这样：

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

注意：看起来FileUpload1是一个ASP.Net服务器端的FileUpload控件。
如果是这样，你应该使用ClientID属性获取它的ID，像这样：

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

- SLaks

Answer 3

要仅获取已上传文件的名称，请使用以下代码：

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

FileUpload1的值包含虚假路径，你可能不想要，为避免这种情况，请使用split和删除文件的最后一个元素。

- Mohamed Thasin ah

---

被接受的答案很好。但是如果您需要文件名而不是虚假路径以便在获取/发布中重复使用，或者用于按钮标签等，则这是完美的选择。 - None

Answer 4

在表单中使用以下代码，我可以捕获原始源上传文件名，并将其复制到第二个简单的输入字段中。这样用户就可以在提交请求时提供替代上传文件名，因为文件上传文件名是不可变的。

    <input type="file" id="imgup1" name="imagefile">
      onchange="document.getElementsByName('imgfn1')[0].value = document.getElementById('imgup1').value;">
    <input type="text" name="imgfn1" value="">

- rickatech

---

虽然这段代码片段可能解决了问题，但是包括解释真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议的原因。 - Ferrybig

Answer 5

尝试使用document.getElementById("FileUpload1").value。该值应包含要上传的文件的路径，只需从该值中剥离所有目录即可获得文件名。

- RaYell

Answer 6

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

- DavidHyogo

Answer 7

尝试

var fu1 = document.getElementById("FileUpload1").value;

- Adriaan Stander