堆栈内存溢出
  繁体   English   中英

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

[英]Javascript - How to extract filename from a file input control

 原文  2009-05-13 12:12:57  5   15    javascript/ browser/ extract

问题描述

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

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

我们如何只提取没有扩展名的文件名？

15 个解决方案

解决方案1
 225  2012-02-10 21:15:01

要拆分字符串 ({filepath}/{filename}) 并获取文件名，您可以使用如下内容：

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

“pop 方法从数组中删除最后一个元素并将该值返回给调用者。”
Mozilla 开发者网络

例子：

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

你得到： "file.txt"

解决方案2
 145 已采纳  2009-05-13 12:24:23

假设您的<input type="file" ><\/strong>有一个上传<\/strong>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);
}

解决方案3
 130  2016-11-05 14:52:47

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

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

解决方案4
 41  2016-12-15 20:38:35

很简单的

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

解决方案5
 26  2018-03-09 23:56:29

假设：

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

解决方案6
 8  2015-08-22 13:41:36

我假设您想删除所有扩展名，即\/tmp\/test\/somefile.tar.gz<\/code>到somefile<\/code> 。

使用正则表达式的直接方法：

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

解决方案7
 8  2009-05-13 12:20:03

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

解决方案8
 4  2012-05-10 16:38:56

我刚刚制作了我自己的版本。 我的函数可以用来从中提取你想要的任何东西，如果你不需要全部，那么你可以很容易地删除一些代码。

<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>

解决方案9
 4  2017-06-26 05:34:34

输入<\/strong>： C:\\path\\Filename.ext<\/code>
输出<\/strong>： Filename<\/code>

在 HTML 代码中，像这样设置 File onChange<\/code>值...

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

解决方案10
 2  2016-05-21 19:45:02

两个高度赞成的答案实际上都没有提供“只是没有扩展名的文件名”，而其他解决方案对于这样一个简单的工作来说代码太多了。

我认为这应该是任何 JavaScript 程序员的单行代码。 这是一个非常简单的正则表达式：

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

解决方案11
 1  2018-03-07 13:33:33

// 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
}

解决方案12
 1  2019-10-16 10:15:05

var path = document.getElementById('upload').value;//take path
var tokens= path.split('\\');//split path
var filename = tokens[tokens.length-1];//take file name

解决方案13
 0  2017-09-27 08:16:12

以上答案都不适合我，这是我的解决方案，它使用文件名更新禁用的输入：

<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>

解决方案14
 0  2020-12-05 00:16:00

//x=address or src
if(x.includes('/')==true){xp=x.split('/')} //split address
if(x.includes('\\')==true){xp=x.split('\\')} //split address
xl=xp.length*1-1;xn=xp[xl] //file==xn
xo=xn.split('.'); //file parts=xo
if(xo.lenght>2){xol=xo.length-1;xt=xo[xol];xr=xo.splice(xol,1);
xr=xr.join('.'); // multiple . in name
}else{
xr=xo[0]; //filename=xr
xt=xo[1]; //file ext=xt
}
xp.splice(xl,1); //remove file
xf=xp.join('/'); //folder=xf , also corrects slashes

//result
alert("filepath: "+x+"\n folder: "+xf+"("+xl+")\n file: "+xn+"\n filename: "+xr+"\n .ext:  "+xt)

解决方案15
 -2  2018-02-07 10:11:14

如果您使用的是 jQuery，那么

$("#fileupload").val();

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript-如何从文件输入控件中提取文件名Mozilla浏览器问题 如何从IE浏览器中的输入文件标签获取javascript中的fileName 从Java输入文件中获取文件名 如何使用JavaScript获取文件选择事件中文件控制的文件名 如何从具有特殊字符的文件名中提取ext-javascript 如何使用JavaScript或JQuery从input type = file html元素获取文件名？ javascript - 从输入 type=file 获取文件名和扩展名 在javascript中输入完整文件名时如何获取文件路径？ 如何从 javascript 文件中提取 javascript function 如何从输入类型=文件值中检索文件名
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM