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

Yog*_*007 108 javascript browser extract

当用户选择网页中的文件时,我希望能够仅提取文件名.

我确实尝试过str.search函数,但是当文件名是这样的时候它似乎失败了:c:\ uploads\ilike.this.file.jpg.

如何在没有扩展名的情况下提取文件名?

小智 180

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

str.split(/(\\|\/)/g).pop()
Run Code Online (Sandbox Code Playgroud)

"pop方法从数组中删除最后一个元素,并将该值返回给调用者." MOZILLA开发者网络

例:

从: "/home/user/file.txt".split(/(\\|\/)/g).pop()

你得到: "file.txt"

  • 您也可以使用正则表达式并且不进行任何数组操作:`var filename = filepath.replace(/^.*?([^] \\ /]*)$ /,'$ 1');` (4认同)
  • 超级棒! (2认同)
  • 分割正则表达式可以缩写为“[\\/]”。此外,还要求剥离文件扩展名。完整的解决方案请参见:http://stackoverflow.com/a/32156800/19163 (2认同)

Ian*_*ley 120

假设你的<input type ="file">有一个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);
}
Run Code Online (Sandbox Code Playgroud)

  • 不,你不想这样做Yogi Yang说.而是使用:`filename = filename.substring(0,filename.lastIndexOf('.'));;因为他的方式将失败,扩展的字符数超过3,因此:.html,.jpeg等. (12认同)

max*_*eni 76

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

var fileInput = document.getElementById('upload');   
var filename = fileInput.files[0].name;
Run Code Online (Sandbox Code Playgroud)

  • 如果用户单击“取消”,则在调用“ .name”之前检查“ fileInput.files.length”。 (4认同)

Uch*_*nna 26

非常简单

let file = $("#fileupload")[0].files[0]; 
file.name
Run Code Online (Sandbox Code Playgroud)


Xed*_*ret 16

假设:

<input type="file" name="file1" id="theFile">
Run Code Online (Sandbox Code Playgroud)

JavaScript将是:

var fileName = document.getElementById('theFile').files[0].name;
Run Code Online (Sandbox Code Playgroud)


TM.*_*TM. 8

var pieces = str.split('\\');
var filename = pieces[pieces.length-1];
Run Code Online (Sandbox Code Playgroud)

  • str.split(/(\\ |\/)/克); 对于Windows和*nix (6认同)

vog*_*vog 7

我假设你想要去除所有扩展,即/tmp/test/somefile.tar.gzsomefile

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

var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];
Run Code Online (Sandbox Code Playgroud)

使用正则表达式和数组操作的替代方法:

var filename = filepath.split(/[\\/]/g).pop().split('.')[0];
Run Code Online (Sandbox Code Playgroud)


DxT*_*xTx 6

输入C:\path\Filename.ext
输出:​Filename

onChange在 HTML 代码中,像这样设置 File值...

<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>
Run Code Online (Sandbox Code Playgroud)

假设您的文本字段 ID 是“wpName”...

<input type="text" name="wpName" id="wpName">
Run Code Online (Sandbox Code Playgroud)

JavaScript

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


Yet*_*eti 5

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

<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>
Run Code Online (Sandbox Code Playgroud)

将输出以下内容:

  • 名为“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.lengthisDirectory

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

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

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