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从\的最后一个索引开始获取剩余的字符串

＆＃13;

function getFile(filePath) {
        return filePath.substr(filePath.lastIndexOf('\\') + 1).split('.')[0];
    }

    function getoutput() {
        outputfile.value = getFile(inputfile.value);
        extension.value = inputfile.value.split('.')[1];
    }

＆＃13;

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

＆＃13;

<强>更新

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

Answer 4

你可以尝试一下：

var fullPath = inputfile.value.split('.')[0];
var filename = fullPath.replace(/^.*[\\\/]/, '');
outputfile.value=filename;`

这应该删除除文件名之外的所有内容。

我是从How to get the file name from a full path using JavaScript?获得的。

Answer 5

首先获取文件名，然后将其切成不同的部分。

const media_file = event.target.files[0] // event is from the <input> event
const filename = media_file.name

let last_dot = filename.lastIndexOf('.')
let ext = filename.slice(last_dot + 1)
let name = filename.slice(0, last_dot)

Answer 6

从文件[0] .type中可以获取扩展名

文件[0]看起来像文件{名称：“ hcl_icon.ico”，最后修改：1559301004000，webkitRelativePath：“”，大小：1150，键入：“ image / x-icon”}

或通过文件阅读器 reader.onload =函数（e）{} e.target.result给出了包含数据扩展名的文件的src

Answer 7

简单快捷。

   var files = event.target.files[0]
   // for getting only extension 
   var fileExtension = files.type.split("/").pop();
   var fileName = files.name

Answer 8

这是一个方便的代码。

    String extension = fileName.substring(fileName.lastIndexOf('.')+1);
    String name = fileName.substring(0, fileName.lastIndexOf('.'));

javascript - 从输入类型=文件

8 个答案: