javascript - 从input type = file获取文件名和扩展名

Question

我有一个文件上传输入,当我单击浏览按钮并选择文件时,我希望文件名和扩展名出现在两个输入文本框中(请参阅代码示例).它与扩展名一起正常工作,但文件名也显示了路径,它给出了伪路径警告.我理解为什么,但是这样做的好方法是将文件名放入该框中.我不需要这条路.

function getoutput(){
    outputfile.value=inputfile.value.split('.')[0];
    extension.value=inputfile.value.split('.')[1];}

    <input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>
    Output Filename <input id='outputfile' type='text' name='outputfile'><br>
    Extension <input id='extension' type='text' name='extension'>

Answer 1

这有点旧帖...仅供参考

   var files = event.target.files
   var filename = files[0].name
   var extension = files[0].type

在类型中你会找到例如扩展名:如果是jpeg图像那么,

extension = image/jpeg

或者如果是pdf那么,

extension = application/pdf

要获得确切的值,请执行extension.replace(/// g,'').你会得到价值.

Answer 2

使用lastIndexOf获取最后一个\作为索引，并使用substr获取剩余的字符串（从的最后一个索引开始）\

function getFile(filePath) {
        return filePath.substr(filePath.lastIndexOf('\\') + 1).split('.')[0];
    }

    function getoutput() {
        outputfile.value = getFile(inputfile.value);
        extension.value = inputfile.value.split('.')[1];
    }

<input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>
    Output Filename <input id='outputfile' type='text' name='outputfile'><br>
    Extension <input id='extension' type='text' name='extension'>

更新

function getoutput(event) {

  if (!event || !event.target || !event.target.files || event.target.files.length === 0) {
    return;
  }

  const name = event.target.files[0].name;
  const lastDot = name.lastIndexOf('.');

  const fileName = name.substring(0, lastDot);
  const ext = name.substring(lastDot + 1);

  outputfile.value = fileName;
  extension.value = ext;
  
}

<input id='inputfile' type='file' name='inputfile' onChange='getoutput(event)'><br>
  Output Filename <input id='outputfile' type='text' name='outputfile'><br>
  Extension <input id='extension' type='text' name='extension'>

Answer 3

var filePath = $("#inputFile").val(); 
var file_ext = filePath.substr(filePath.lastIndexOf('.')+1,filePath.length);
console.log("File Extension ->-> "+file_ext);

如果文件名中有点，它将起作用。