JavaScript - 从input type=file获取文件名和扩展名

Question

我有一个文件上传输入框，当我点击浏览按钮并选择文件时，我希望文件名和扩展名出现在两个文本输入框中（参见代码示例）。

它正确地使用扩展名，但文件名也显示了路径，这给了我fakepath警告。

我理解原因，但有什么好的方法来做到这一点并仅将文件名放入该框中。我不需要路径。

function getoutput(){
    outputfile.value=inputfile.value.split('.')[0];
    extension.value=inputfile.value.split('.')[1];}

    <input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>
    Output Filename <input id='outputfile' type='text' name='outputfile'><br>
    Extension <input id='extension' type='text' name='extension'>

- CheeseFlavored

---

抱歉打扰了，但有人删除了我的回答，该回答是关于您刚刚提交应用程序到App Store并收到UIWebView弃用警告的帖子：https://dev59.com/71MH5IYBdhLWcg3w5FCQ#57705283?noredirect=1#comment101862403_57705283 我非常好奇苹果是否会基于UIWebView使用而拒绝它。您能否告诉我？ - Tonald Drump

Answer 1

这篇文章有点旧了……仅供参考

   var files = event.target.files
   var filename = files[0].name
   var extension = files[0].type

在该类型中，您将找到扩展名 例如：如果它是jpeg图像，则为，

extension = image/jpeg

或者如果是 PDF 格式，则：

extension = application/pdf

要获得精确的值，请执行 extension.replace(/(.*)\//g, '')。这样你就可以得到该值。

- Dhatri Suresh

---

这很整洁，但是有一个“但是”... type 属性可能会返回空字符串。例如，如果您作为客户端上传了一个 docx 文件，但是在客户端机器上没有安装 MS Word，则浏览器会在 type 上返回一个空字符串。需要回退机制。不过，在每个浏览器中的行为都不同。我曾经在最新/最近的 Chrome 版本上看到过这种空字符串结果，并且在我的开发机器上没有安装 MS Word。 - Michael

那个正则表达式模式只会删除 /。应该是 extension.replace(/(.*)\//g, '')。 - Crayons

@Crayons 是的...谢谢 - Dhatri Suresh

如果我上传 *.docx 文件，它会返回以下内容：application/vnd.openxmlformats-officedocument.wordprocessingml.document。如何仅获取扩展名 "docx"？ - SatelBill

Answer 2

使用lastIndexOf方法获取最后一个\的索引，然后使用substr方法获取从最后一个\索引开始的剩余字符串。

function getFile(filePath) {
        return filePath.substr(filePath.lastIndexOf('\\') + 1).split('.')[0];
    }

    function getoutput() {
        outputfile.value = getFile(inputfile.value);
        extension.value = inputfile.value.split('.')[1];
    }

<input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>
    Output Filename <input id='outputfile' type='text' name='outputfile'><br>
    Extension <input id='extension' type='text' name='extension'>

更新

function getFileNameWithExt(event) {

  if (!event || !event.target || !event.target.files || event.target.files.length === 0) {
    return;
  }

  const name = event.target.files[0].name;
  const lastDot = name.lastIndexOf('.');

  const fileName = name.substring(0, lastDot);
  const ext = name.substring(lastDot + 1);

  outputfile.value = fileName;
  extension.value = ext;
  
}

<input id='inputfile' type='file' name='inputfile' onChange='getFileNameWithExt(event)'><br>
  Output Filename <input id='outputfile' type='text' name='outputfile'><br>
  Extension <input id='extension' type='text' name='extension'>

- Junius L

---

在输出文件名框中，我只想要文件名，而不是扩展名。因此，如果我的输入文件是example.txt，则“example”应该出现在一个框中，而“txt”则出现在另一个框中。 - CheeseFlavored

如果文件名为 555-1\5476646457441130460313.png，则这是不正确的。 - Long Nguyen

我无法从函数外部访问 extension.value。当我将其分配给变量 var ext = extension.value 时，它始终保持本地化。我该如何解决这个问题？ - Brian

它只在函数内部起作用。所以我仍然无法将变量的值取出。 - Brian

@BhavinKalal 是的。请检查更新后的答案。 - Junius L

Answer 3

var filePath = $("#inputFile").val(); 
var file_ext = filePath.substr(filePath.lastIndexOf('.')+1,filePath.length);
console.log("File Extension ->-> "+file_ext);

如果您的文件名中有点，它也会起作用。

- Poorna

Answer 4

首先获取文件名，然后将其切成各个部分。

const media_file = event.target.files[0] // event is from the <input> event
const filename = media_file.name

let last_dot = filename.lastIndexOf('.')
let ext = filename.slice(last_dot + 1)
let name = filename.slice(0, last_dot)

- chidimo

Answer 5

你可以尝试这个方法：

var fullPath = inputfile.value.split('.')[0];
var filename = fullPath.replace(/^.*[\\\/]/, '');
outputfile.value=filename;`

这应该只会保留文件名。

我是从如何使用JavaScript从完整路径获取文件名？找到的。

- Valentin Gavran

Answer 6

这里有一段实用的代码。

    String extension = fileName.substring(fileName.lastIndexOf('.')+1);
    String name = fileName.substring(0, fileName.lastIndexOf('.'));

- Remario

---

这是什么语言？ - 1252748

也许，Java 混合 JavaScript - user19690494

Answer 7

用更少的代码

let fileName = "profile.png";
let extension = fileName.split(".").pop();

- burak isik

Answer 8

简单快速。

   var files = event.target.files[0]
   // for getting only extension 
   var fileExtension = files.type.split("/").pop();
   var fileName = files.name

- Salman Mehmood

Answer 9

通过 file[0].type，您可以获取文件扩展名。

file[0] 的样子如下： File { name: "hcl_icon.ico", lastModified: 1559301004000, webkitRelativePath: "", size: 1150, type: "image/x-icon" }

或者通过文件阅读器： reader.onload = function (e){} e.target.result 给出包含数据的文件的 src，其中包含扩展名。

- Rashmi HazeL ivy DorisFay

Answer 10

我使用这个来获取文件名和扩展名

对于文件名：

this.files[0].name.slice(0, this.files[0].name.lastIndexOf("."))

对于文件扩展名：

this.files[0].name.slice(this.files[0].name.lastIndexOf(".") + 1, this.files[0].name.length)

示例代码：

document.getElementById("file").oninput = function() {
    console.log("File name: "+this.files[0].name.slice(0, this.files[0].name.lastIndexOf(".")))
    console.log("File extension: "+this.files[0].name.slice(this.files[0].name.lastIndexOf(".") + 1, this.files[0].name.length))
}

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <input type="file" id="file">
</body>
<script>
document.getElementById("file").oninput = function(val) {
    console.log("File name: "+this.files[0].name.slice(0, this.files[0].name.lastIndexOf(".")))
    console.log("File extension: "+this.files[0].name.slice(this.files[0].name.lastIndexOf(".") + 1, this.files[0].name.length))
}
</script>

希望这能有所帮助。

- Chencho Namgyel