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

Question

我有一个文件上传输入，当我单击浏览按钮并选择文件时，我希望文件名和扩展名出现在两个输入文本框中（参见代码示例）。

它与扩展名一起正常工作，但文件名还显示了给我 fakepath 警告的路径。

我明白为什么，但是这样做的好方法是什么，只需将文件名放入该框中。我不需要路径。

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

原文由 CheeseFlavored 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 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 getFileNameWithExt(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='getFileNameWithExt(event)'><br>
  Output Filename <input id='outputfile' type='text' name='outputfile'><br>
  Extension <input id='extension' type='text' name='extension'>

原文由 Junius L. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个有点老的帖子……仅供参考

   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, “)。你会得到价值。

原文由 Dhatri Suresh 发布，翻译遵循 CC BY-SA 4.0 许可协议