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

我有一个文件上传输入,当我单击浏览按钮并选择文件时,我希望文件名和扩展名出现在两个输入文本框中(请参阅代码示例)。 它可以正确地使用扩展,但是文件名也显示了给我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'>
时间:

Use lastIndexOf lastIndexOf以获取最后一个索引,并使用 从的最后一个索引开始获取剩余的字符串


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

这是个旧的帖子。只是为了信息


 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,'') 。 你会取的值。

...