Limitare il formato del file quando si utilizza <input type = “file”>?

Vorrei limitare il tipo di file che può essere scelto dal selettore file del sistema operativo nativo quando l'utente fa clic sul pulsante Sfoglia <input type="file">nell'elemento in HTML. Ho la sensazione che è impossibile, ma mi piacerebbe sapere se v'è una soluzione. Mi piacerebbe mantenere esclusivamente HTML e JavaScript; nessun flash per favore.

A rigor di termini, la risposta è no . Uno sviluppatore non può impedire a un utente di caricare file di qualsiasi tipo o estensione.

Tuttavia, l' attributo accetta di <input type = "file">può aiutare a fornire un filtro nella finestra di dialogo di selezione file del sistema operativo. Per esempio,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

dovrebbe fornire un modo per filtrare file diversi da .xls o .xlsx. Sebbene la pagina MDN per inputelement abbia sempre detto che supporta questo, con mia sorpresa, questo non ha funzionato per me in Firefox fino alla versione 42. Funziona in IE 10+, Edge e Chrome.

Quindi, per supportare Firefox più vecchio di 42 insieme a IE 10+, Edge, Chrome e Opera, immagino sia meglio usare un elenco separato da virgole di tipi MIME:

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

Comportamento [ Edge (EdgeHTML): il menu a discesa del filtro del tipo di file mostra i tipi di file menzionati qui, ma non è il valore predefinito nel menu a discesa. Il filtro predefinito è All files (*).]

Puoi anche usare gli asterischi nei tipi MIME. Per esempio:

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types --> 

Il W3C raccomanda agli autori di specificare sia i tipi MIME che le estensioni corrispondenti acceptnell'attributo. Quindi, l' approccio migliore è:

<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

JSFiddle dello stesso: qui .

Riferimento: elenco di tipi MIME

IMPORTANTE: l' utilizzo acceptdell'attributo fornisce solo un modo per filtrare i file di tipi di interesse. I browser consentono ancora agli utenti di scegliere file di qualsiasi tipo. Dovrebbero essere effettuati controlli aggiuntivi (lato client) (usando JavaScript, un modo sarebbe questo ), e sicuramente i tipi di file DEVONO essere verificati sul server , usando una combinazione di tipo MIME usando sia l'estensione del file che la sua firma binaria ( ASP .NET , PHP , Ruby , Java ). Potresti anche fare riferimento a queste tabelle per i tipi di file e i loro numeri magici, per eseguire una verifica lato server più solida.

Ecco tre buone letture su upload di file e sicurezza.

EDIT: forse la verifica del tipo di file usando la sua firma binaria può essere fatta anche sul lato client usando JavaScript (piuttosto che semplicemente guardando l'estensione) usando l'API File HTML5, ma comunque, il file deve essere verificato sul server, perché un utente malintenzionato sarà comunque in grado di caricare file facendo una richiesta HTTP personalizzata.

C'è l'attributo accetta per il tag di input. Tuttavia, non è affidabile in alcun modo. Molto probabilmente i browser lo trattano come un "suggerimento", il che significa che l'utente, a seconda del gestore dei file, avrà una preselezione che visualizza solo i tipi desiderati. Possono comunque scegliere "tutti i file" e caricare tutti i file desiderati.

Per esempio:

<form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

Leggi di più in specifiche HTML5

Tieni presente che deve essere utilizzato solo come "aiuto" affinché l'utente possa trovare i file giusti. Ogni utente può inviare qualsiasi richiesta desidera al tuo server. Devi sempre convalidare tutto sul lato server.

Quindi la risposta è: no non puoi limitare , ma puoi impostare una preselezione ma tu puoi fare affidamento su di essa.

In alternativa o in aggiunta puoi fare qualcosa di simile controllando il nome del file (valore del campo di input) con JavaScript, ma non ha senso perché non fornisce protezione e non facilita la selezione per l'utente. Potenzialmente induce un webmaster a pensare che sia protetto e apre una falla nella sicurezza. Può essere una seccatura per gli utenti che hanno estensioni di file alternative (ad esempio jpeg anziché jpg), maiuscole o nessuna estensione di file (come è comune sui sistemi Linux).

È possibile utilizzare l' changeevento per monitorare ciò che l'utente seleziona e avvisare a quel punto che il file non è accettabile. Non limita l'elenco effettivo dei file visualizzati, ma è il più vicino che puoi fare sul lato client, oltre acceptall'attributo scarsamente supportato .

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

<input type="file" id="someId" />

JSFiddle

Si hai ragione. È impossibile con HTML. L'utente sarà in grado di scegliere qualsiasi file desidera.

È possibile scrivere un pezzo di codice JavaScript per evitare di inviare un file in base alla sua estensione. Ma tieni presente che ciò non impedirà in alcun modo a un utente malintenzionato di inviare qualsiasi file che desidera davvero.

Qualcosa di simile a:

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

Codice HTML:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

Tecnicamente puoi specificare l' acceptattributo (alternativa in html5 ) inputsull'elemento, ma non è supportato correttamente.

Usa inputtag con acceptattributo

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

Fai clic qui per l'ultima tabella di compatibilità del browser

Demo live qui

Per selezionare solo i file di immagine, è possibile utilizzare questo accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

Demo live qui

Verranno visualizzati solo gif, jpg e png, schermata catturata dalla versione 44 di Chrome

So che è un po 'tardi.

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

In realtà potresti farlo con javascript ma ricorda che js è lato client, quindi in realtà "avvertiresti gli utenti" che tipo di file possono caricare, se vuoi EVITARE (limitare o limitare come hai detto) un determinato tipo di file DEVI fallo sul lato server.

Guarda questo tutorial di base se desideri iniziare con la convalida lato server. Per l'intero tutorial visita questa pagina .

In bocca al lupo!

Come menzionato nelle risposte precedenti, non possiamo limitare l'utente a selezionare i file solo per determinati formati di file. Ma è davvero utile usare il tag accetta sull'attributo file in html.

Per quanto riguarda la convalida, dobbiamo farlo sul lato server. Possiamo anche farlo sul lato client in js ma non è una soluzione infallibile. Dobbiamo convalidare sul lato server.

Per questi requisiti preferisco davvero il framework di sviluppo di applicazioni web Java struts2. Con la sua funzione di caricamento file integrata, caricare file su app Web basate su struts2 è un gioco da ragazzi. Basta menzionare i formati di file che vorremmo accettare nella nostra applicazione e tutto il resto è curato dal nucleo del framework stesso. Puoi dare un'occhiata al sito ufficiale di struts.

Posso suggerire quanto segue:

• Se devi fare in modo che l'utente selezioni uno qualsiasi dei file immagine per impostazione predefinita, l'uso accetta = "image / *"

  <input type="file" accept="image/*" />

• se si desidera limitare a tipi di immagine specifici, utilizzare accept = "image / bmp, image / jpeg, image / png"

  <input type="file" accept="image/bmp, image/jpeg, image/png" />

• se si desidera limitare a tipi specifici, utilizzare accept = ". bmp, .doc, .pdf"

  <input type="file" accept=".bmp, .doc, .pdf" />

• Non è possibile limitare l'utente a modificare il file filer in tutti i file, quindi convalidare sempre il tipo di file in script e server