Javascript – 如何从文件input控件提取文件名
当用户在网页中select一个文件时，我希望能够提取文件名。
我曾尝试str.search函数，但似乎失败时，文件名是这样的： c：\ uploads \ ilike.this.file.jpg 。
我们如何才能提取没有扩展名的文件名？
假设你的<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); } 要分割string（{filepath} / {filename}）并获取文件名，可以使用如下所示：
str.split(/(\\|\/)/g).pop()
“pop方法从数组中删除最后一个元素并将该值返回给调用者。” MOZILLA开发者networking
例：
from： "/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
var pieces = str.split('\\'); var filename = pieces[pieces.length-1];
我只是做了我自己的版本。 我的function可以用来提取你想要的任何东西，如果你不需要它，那么你可以很容易地删除一些代码。
<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'
在给定testing用例的情况下，您可以看到，与其他方法相比，此函数的工作原理相当稳健。
注意关于\\的新手：\是一个转义字符，例如\ n表示一个换行符和\ ta选项卡。 为了能写\ n，你必须input\\ n。
我假设你想剥离所有扩展名， /tmp/test/somefile.tar.gz到somefile 。
直接与正则expression式的方法：
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];
正则expression式和数组操作的替代方法：
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];
高度回应的答案实际上没有提供“只是没有扩展名的文件名”，而其他的解决scheme对于这么简单的工作来说代码太多了。
我认为这应该是任何JavaScript程序员的一个单行本。 这是一个非常简单的正则expression式：
function basename(prevname) { return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, ''); }
首先，剥去任何东西直到最后的斜线，如果存在的话。
然后，剥去最后一段时间后的任何东西，如果有的话。
这很简单，它是强大的，它实现了什么要求。 我错过了什么吗？
input ：C：\path\ Filename.ext
输出 ：文件名
在HTML代码中，像这样设置File 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>
上述答案都没有为我工作，这是我的解决scheme，更新一个禁用的input与文件名：
<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>
