Javascript - 如何从文件输入控件中提取文件名

StackOverflow https://stackoverflow.com/questions/857618

  •  21-08-2019
  •  | 
  •  

题

当用户在网页中选择文件时，我希望能够仅提取文件名。

我确实尝试了 str.search 函数，但当文件名如下所示时它似乎失败： c:\uploads\ilike.this.file.jpg.

我们怎样才能只提取文件名而不提取扩展名呢？

有帮助吗？

解决方案

假设您的 具有一个id 上传此应该有希望达到目的：

var fullPath = document.getElementById('upload').value;
if (fullPath) {
    var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
    var filename = fullPath.substring(startIndex);
    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
        filename = filename.substring(1);
    }
    alert(filename);
}

其他提示

要分割字符串（{文件路径} / {文件名}），并获取文件名，你可以使用这样的：

str.split(/(\\|\/)/g).pop()
  

“pop方法删除数组的最后一个元素，并返回该   值给调用者“。    MOZILLA DEVELOPER联网

示例：

这："/home/user/file.txt".split(/(\\|\/)/g).pop()

您可以："file.txt"

现在有一种更简单的方法：

var fileInput = document.getElementById('upload');   
var filename = fileInput.files[0].name;

很简单

let file = $("#fileupload")[0].files[0]; 
file.name

假设：

<input type="file" name="file1" id="theFile">

在JavaScript的将是：

var fileName = document.getElementById('theFile').files[0].name;

var pieces = str.split('\\');
var filename = pieces[pieces.length-1];

我刚刚做了我自己的版本。我的函数可用于从中提取您想要的任何内容，如果您不需要全部，那么您可以轻松删除一些代码。

<html>
<body>
<script type="text/javascript">
// Useful function to separate path name and extension from full path string
function pathToFile(str)
{
    var nOffset = Math.max(0, Math.max(str.lastIndexOf('\\'), str.lastIndexOf('/')));
    var eOffset = str.lastIndexOf('.');
    if(eOffset < 0 && eOffset < nOffset)
    {
        eOffset = str.length;
    }
    return {isDirectory: eOffset === str.length, // Optionally: && nOffset+1 === str.length if trailing slash means dir, and otherwise always file
            path: str.substring(0, nOffset),
            name: str.substring(nOffset > 0 ? nOffset + 1 : nOffset, eOffset),
            extension: str.substring(eOffset > 0 ? eOffset + 1 : eOffset, str.length)};
}

// Testing the function
var testcases = [
    "C:\\blabla\\blaeobuaeu\\testcase1.jpeg",
    "/tmp/blabla/testcase2.png",
    "testcase3.htm",
    "C:\\Testcase4", "/dir.with.dots/fileWithoutDots",
    "/dir.with.dots/another.dir/"
];
for(var i=0;i<testcases.length;i++)
{
    var file = pathToFile(testcases[i]);
    document.write("- " + (file.isDirectory ? "Directory" : "File") + " with name '" + file.name + "' has extension: '" + file.extension + "' is in directory: '" + file.path + "'<br />");
}
</script>
</body>
</html>

将输出以下内容：

  • 名为“testcase1”的文件具有扩展名：“jpeg”位于目录中：'C:\blabla\blaeobuaeu'
  • 名为“testcase2”的文件具有扩展名：“png”位于目录中：'/tmp/blabla'
  • 名为“testcase3”的文件具有扩展名：“htm”位于目录中：”
  • 名为“Testcase4”的目录具有扩展名：'' 位于目录中：'C：'
  • 名为“fileWithoutDots”的目录具有扩展名：'' 位于目录中：'/dir.with.dots'
  • 名为“”的目录具有扩展名：'' 位于目录中：'/dir.with.dots/another.dir'

和 && nOffset+1 === str.length 添加到 isDirectory:

  • 名为“testcase1”的文件具有扩展名：“jpeg”位于目录中：'C:\blabla\blaeobuaeu'
  • 名为“testcase2”的文件具有扩展名：“png”位于目录中：'/tmp/blabla'
  • 名为“testcase3”的文件具有扩展名：“htm”位于目录中：”
  • 名为“Testcase4”的目录具有扩展名：'' 位于目录中：'C：'
  • 名为“fileWithoutDots”的目录具有扩展名：'' 位于目录中：'/dir.with.dots'
  • 名为“”的目录具有扩展名：'' 位于目录中：'/dir.with.dots/another.dir'

根据测试用例，您可以看到与此处提出的其他方法相比，该函数的工作相当稳健。

新手注意 \\:\ 是转义字符，例如 表示换行符， 表示制表符。为了能够写入 ，您必须实际键入 \ 。

我想你想要去除所有扩展，即/tmp/test/somefile.tar.gz到somefile。

与正则表达式的直接方法：

var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];

与正则表达式和数组运算替代做法：

var filename = filepath.split(/[\\/]/g).pop().split('.')[0];

<强>输入：C:\path\Filename.ext结果 的输出：Filename

在HTML代码，设置文件onChange值这样... 

<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>

假设你的文本字段的id是 'wpName' ...... 

<input type="text" name="wpName" id="wpName">

的JavaScript 

<script>
  function setfilename(val)
  {
    filename = val.split('\\').pop().split('/').pop();
    filename = filename.substring(0, filename.lastIndexOf('.'));
    document.getElementById('wpName').value = filename;
  }
</script>

无论是高度upvoted答案实际上提供了“不只是扩展名的文件名”，另一个解决方案是这样一个简单的工作了太多的代码。

我认为这应该是一衬垫以任何JavaScript编程器。这是一个非常简单的正则表达式：

function basename(prevname) {
    return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}

首先，剥去任何直到最后斜线，如果存在的话。

然后，剥去任何最后段之后，如果存在的话。

这很简单，它的强大，它实现了到底发生了要求。我缺少的东西吗？

// HTML
<input type="file" onchange="getFileName(this)">

// JS
function getFileName(input) {
    console.log(input.files[0].name) // With extension
    console.log(input.files[0].name.replace(/\.[^/.]+$/, '')) // Without extension
}

如何删除扩展

为我工作以上答案都不对，这里是我的解决方案，它的文件名更新禁用输入：

<script type="text/javascript"> 
  document.getElementById('img_name').onchange = function () {
  var filePath = this.value;
    if (filePath) {
      var fileName = filePath.replace(/^.*?([^\\\/]*)$/, '$1');
      document.getElementById('img_name_input').value = fileName;
    }
  };
</script>

如果你正在使用jQuery然后

$("#fileupload").val();
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top