I have a file upload input and when I click the browse button and select the file, I want the filename and extension to appear in two input text boxes (see code sample).
It works correctly with the extension, but the filename also shows the path which gives me the fakepath warning.
I understand why, but what's a good way to do this and just get the filename into that box. I don't need the path.
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 to get the last \\
as an index and use substr to get the remaining string starting from the last index of \\
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'>
UPDATE
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'>
This is bit old post...just for info
var files = event.target.files
var filename = files[0].name
var extension = files[0].type
In the type you will find the extension for eg: if it is jpeg image then,
extension = image/jpeg
or if pdf then,
extension = application/pdf
To obtain the exact value, perform extension.replace(/(.*)\\//g, ''). you will get the value.
var filePath = $("#inputFile").val();
var file_ext = filePath.substr(filePath.lastIndexOf('.')+1,filePath.length);
console.log("File Extension ->-> "+file_ext);
It will work if you have dots in filename.
Here is a handy code.
String extension = fileName.substring(fileName.lastIndexOf('.')+1);
String name = fileName.substring(0, fileName.lastIndexOf('.'));
You could try this out:
var fullPath = inputfile.value.split('.')[0];
var filename = fullPath.replace(/^.*[\\\/]/, '');
outputfile.value=filename;`
This should remove everything except the filename.
I got it from How to get the file name from a full path using JavaScript? .
First get the filename, then slice it to various parts.
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)
Simple and quick.
var files = event.target.files[0]
// for getting only extension
var fileExtension = files.type.split("/").pop();
var fileName = files.name
from file[0].type you can get the extension
file[0] looks like File { name: "hcl_icon.ico", lastModified: 1559301004000, webkitRelativePath: "", size: 1150, type: "image/x-icon" }
or by File reader reader.onload = function (e){} e.target.result gives the src of the file contains Data have extension
With less code
let fileName = "profile.png";
let extension = fileName.split(".").pop();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.