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

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

javascript browser

Javascript-如何从文件输入控件提取文件名,javascript,browser,extract,Javascript,Browser,Extract,当用户在网页中选择文件时，我希望能够仅提取文件名我确实尝试了str.search函数，但当文件名如下时，它似乎失败了：c:\uploads\ilike.this.file.jpg 我们如何才能只提取文件名而不提取扩展名？假设您的id为upload，这应该可以实现以下目的： var pieces = str.split('\\'); var filename = pieces[pieces.length-1]; var fullPath = document.getElementById('u

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

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

我们如何才能只提取文件名而不提取扩展名？

假设您的id为upload，这应该可以实现以下目的：

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

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);
}

要拆分字符串（{filepath}/{filename}）并获取文件名，可以使用如下方式：

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

pop方法从数组中删除最后一个元素并返回调用方的值。“

例如：

from:

“/home/user/file.txt”.split（/（\\\\\\/）/g）.pop（）

你会得到：

“file.txt”

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

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


//用于从完整路径字符串中分离路径名和扩展名的有用函数
函数路径文件（str）
{
var nOffset=Math.max（0，Math.max（str.lastIndexOf（'\\'）、str.lastIndexOf（'/'））；
var eOffset=str.lastIndexOf（'.'）；
if（eOffset<0&&eOffset0？nOffset+1:nOffset，eOffset），
扩展名：str.substring（eOffset>0？eOffset+1:eOffset，str.length）}；
}
//测试功能
var测试用例=[
“C:\\blabla\\blaeobuaeu\\testcase1.jpeg”，
“/tmp/blabla/testcase2.png”，
“testcase3.htm”，
“C:\\Testcase4”，“/dir.with.dots/filewithout dots”，
“/dir.with.dots/other.dir/”
];
对于（var i=0；i我假设您希望剥离所有扩展名，即/tmp/test/somefile.tar.gz
到somefile

使用正则表达式的直接方法：
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];

使用正则表达式和数组操作的替代方法：
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];

这两个高投票率的答案实际上都没有“只提供文件名而不提供扩展名”，而其他解决方案对于这样一个简单的工作来说，代码太多了
我认为这对任何JavaScript程序员来说都应该是一个简单的正则表达式：
function basename(prevname) {
    return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}

首先，如果有，把任何东西都去掉，直到最后一条斜线
然后，在最后一段时间后脱掉任何东西，如果有的话
它简单、健壮，完全实现了要求的功能。我是否遗漏了什么？
现在有一种更简单的方法：
var fileInput = document.getElementById('upload');   
var filename = fileInput.files[0].name;

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

输入：C:\path\Filename.ext


输出：文件名

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


函数setfilename（val）
{
filename=val.split（'\\'）.pop（）.split（'/'）.pop（）；
filename=filename.substring（0，filename.lastIndexOf（'.'）；
document.getElementById（'wpName'）。value=filename；
}
以上答案对我都不起作用，下面是我的解决方案，它用文件名更新禁用的输入：
<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>


document.getElementById（'img_name'）。onchange=function（）{
var filePath=this.value；
if（文件路径）{
var fileName=filePath.replace（/^.*（[^\\/]*）$/，“$1”）；
document.getElementById（'img_name_input'）。value=fileName；
}
};
如果您使用的是jQuery，那么
$("#fileupload").val();

//HTML
//JS
函数getFileName（输入）{
console.log（input.files[0].name）//扩展名为
console.log（input.files[0].name.replace（//\.[^/]+$/，''）//不带扩展名
}

假设：
<input type="file" name="file1" id="theFile">

这假设用户正在运行Windows。其他操作系统使用不同的文件路径分隔符。是否需要检查非Windows用户的“/”字符，例如如果（！pieces）{str.split（“/”）；}？很好的简单解决方案，+1IRC，IE是唯一一款提供文件完整路径的浏览器…您不需要在其他浏览器（如Firefox）上进行拆分，因此它仍然可以工作。尽管我承认我没有尝试过所有linux/unix浏览器。str.split（/（\\\\\\\/）/g）；用于窗户和*nix@TM.Chrome为安全起见使用了一个伪路径变量，这很难看；iirc根据您所使用的操作系统而有所不同。谢谢，这似乎工作得很好，但我只想要没有扩展名的文件名。在上面的代码中如何做到这一点。我添加了这两行代码来提取没有扩展名的文件名：“filename=filename.substring（0，filename.length-4）；filename=filename.toLowerCase（）；”不，你不想用Yogi Yang说的方式来做。而是使用：filename=filename.substring（0，filename.lastIndexOf（'.'））；
因为他的方法将失败，扩展名超过3个字符，因此：.html、.jpeg等。在选择多个文件时如何获取文件名？为什么不这样计算startIndex？var startIndex=Math.max（fullPath.lastIndexOf（'\\'）、fullPath.lastIndexOf（'/'））+1；
注意这个路径：dir.with.dots/fileWithoutDots，因为你会得到小于nOffset的eOffset并混淆提取表达式。是的，修复了它。现在它也应该可以正常工作了（添加了&&eOffset
）。你也可以只使用正则表达式而不使用任何数组操作：var filename=filepath.replace（/^.*（[^\\/]*）$/，“$1”）；
vog的答案非常接近问题的100%准确答案（除了需要去掉扩展名）。文件名与任何其他字符串没有区别。拆分的正则表达式可以缩短为[\\/]。此外，它还被要求剥离文件扩展名。要获得完整的解决方案，请参阅：多平台，简明。很棒。很棒的解决方案，我不明白它是如何工作的，这就是为什么我更喜欢它！t
<input type="file" name="file1" id="theFile">

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

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

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