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

【问题标题】：Get the filename of a fileupload in a document through JavaScript通过 JavaScript 获取文档中文件上传的文件名
【发布时间】：2010-12-20 18:10:07
【问题描述】：

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

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

【问题讨论】：

标签： javascript file-upload

【解决方案1】：

在 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，这对我没有任何回报。

【解决方案2】：

试试value 属性，如下所示：

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

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

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

【讨论】：

【解决方案3】：

要只获取上传的文件名，请使用这个，

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

FileUpload1 值包含您可能不想要的假路径，以避免使用拆分并从文件中弹出最后一个元素。

【讨论】：

接受的答案很好。但是，如果您需要没有虚假路径的文件名以便在 fetch/post 或按钮标签等中重用，这是完美的，

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【解决方案7】：

试试

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

【讨论】：