Answers:
假设您的<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);
}
filename = filename.substring(0, filename.lastIndexOf('.'));
因为他的方式将与多个字符的扩展比3,从而失败:html的,.JPEG等
var startIndex = Math.max(fullPath.lastIndexOf('\\'), fullPath.lastIndexOf('/')) + 1;
要分割字符串({filepath} / {filename})并获取文件名,您可以使用以下命令:
str.split(/(\\|\/)/g).pop()
“ pop方法从数组中删除最后一个元素,并将该值返回给调用者。”
Mozilla开发人员网络
例:
从: "/home/user/file.txt".split(/(\\|\/)/g).pop()
你得到: "file.txt"
var filename = filepath.replace(/^.*?([^\\\/]*)$/, '$1');
[\\/]
。此外,也有人要求剥离文件扩展名。有关完整的解决方案,请参阅:stackoverflow.com/a/32156800/19163
如今,有一种更简单的方法:
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;
fileInput.files.length
在致电之前进行检查.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>
将输出以下内容:
随着&& nOffset+1 === str.length
加入到isDirectory
:
在给出测试用例的情况下,您可以看到此功能与此处提出的其他方法相比非常健壮。
对于新手,请注意\\:\是转义字符,例如\ n表示换行符和\ ta选项卡。为了能够编写\ n,您必须实际键入\\ n。
&& eOffset < nOffset
)。
输入:C:\path\Filename.ext
输出:Filename
在HTML代码中,onChange
像这样设置File 值...
<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>
没有一个被高度评价的答案实际上没有提供“只是文件名而没有扩展名”,而其他解决方案对于这种简单的工作来说却是太多的代码。
我认为这应该是任何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>