0
329
ViewsHow to print the multiple input order "File name" in html and JS
I have five files scan.pdf, "1_PVC", "2_Graham", 3_TAC, "4_TEC", I want the console.log can print retrieve the exact same string ("scan" "1_PVC" "2_Graham" 3_TAC "4_TEC") inside the filename. No matter how I get, it will eventually get from Alphabetical order "1_PVC" ... This is what I've done so far.
<input type="file" name="filess[]" id="file" accept=".pdf" multiple="multiple" />
var filess = event.target.files;
console.log(filess);
var count = files.length;
for (var k=0; k<file.files.length; ++k){
console.log(files[i].name + "\n");
}
Any method I can print the "File name:" based on user selection.
·
Juan Pablo Isaza
2 answers
Answer question0
Is this what you are looking for?
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<script>
function logFiles(){
var list=document.getElementById('filesElement').files;
var listlen=list.length;
for (var filenum=0;filenum<listlen;filenum++){
console.log(list[filenum].name);
}
}
</script>
</head>
<body>
<input type='file' id='filesElement' multiple='multiple' onchange='logFiles();' />
</body>
</html>
·
Juan Pablo Isaza
Report
0
Try using the FilePicker api (as it preserves order from selection):
const fileHandles = await window.showOpenFilePicker({multiple: true});
console.log(fileHandles.map(fh => fh.name));
You can also read and write local files using the FileSystem API. https://developer.mozilla.org/en-US/docs/Web/API/FileSystem The FilePicker only works in Edge and Chrome atm though: https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker
·
Juan Pablo Isaza
Report
Answer question