javascript - Acceptera endast csv-filer via en HTML-filinmatning

Html-fil inmatningstaggen ges nedan som endast accepterar .csv-filer.

<input id="csvFileInput" type="file" accept=".csv"/>

Det fungerar perfekt. Men mitt fall är..

I fönstret för filval kan användaren välja 'alla typer' istället för '.csv-fil'. Då kan användaren välja vilken filtyp som helst. Hur skulle jag kunna hantera den situationen?

Kan jag hantera det genom att bara ändra HTML-taggen? Eller ska en annan Javascript-taktik implementeras?

Tack, Med vänliga hälsningar..

Svar #1

Du kan lägga till en validering onchange och validera filändelsen.

Även om inputtypen i HTML accepterar .png, misslyckas regex i JS eftersom den är utformad för att endast acceptera CSV. Du kan ändra HTML för att endast acceptera CSV.

var regex = new RegExp("(.*?)\.(csv)$");

function triggerValidation(el) {
  if (!(regex.test(el.value.toLowerCase()))) {
    el.value = '';
    alert('Please select correct file format');
  }
}

<input id="csvFileInput" type="file" accept=".png" onchange='triggerValidation(this)'>

Svar #2

HTML kommer alltid att tillåta användaren att klicka på 'Alla filer'

Oavsett om du begränsar "accept=" med hjälp av tillägget eller MIME-typen eller båda, kan användaren alltid byta till 'Alla filer'.

Javascript behövs

Till exempel,

var selectedFile = document.getElementById('csvFileInput');
selectedFile.onchange = function(e){
    switch ((this.value.match(/\.([^\.]+)$/i)[1]).toLowerCase()) {
        case 'csv':
        case 'txt': /* since they might have a CSV saved as TXT */
             /* ... insert action for valid file extension */
        default:
            /* Here notify user that this file extension is not suitable */
            this.value=''; /* ... and erase the file */
    }
};

Validering på serversidan behövs också

Kom ihåg att användaren alltid kan kringgå processen genom att till exempel byta namn på en .exe till en .csv, så där det är relevant bör du också kontrollera innehållet i filen för att uppfylla dina kriterier, på serversidan.