HTML <input type = 'file'> applicare un filtro

Question

<input type='file' name='userFile'> 

ora quando faccio clic sul pulsante Sfoglia, la finestra di ricerca mostrerà tutti i file ... Che cosa devo fare per filtrare i tipi di file consente di dire

• solo immagini o .png & .jpg & .gifs
• solo file di office come .doc & .docx & .pps

come farlo ...

Answer 1

C'è un attributo "accetta" sui controlli di input dei file, in cui è possibile specificare i tipi di file che si desidera. Da quello che sto vedendo, però, molti browser amano ignorarlo - i tipi di file che possono essere specificati sono tipi MIME, quindi un browser strettamente corretto dovrebbe guardare ogni file indipendentemente dall'estensione e vedere se è un'immagine (e se sì, che tipo è).

Aggiornamento: Sembra almeno una qualche versione di tutti i principali browser su Windows offre ora almeno un po 'di supporto per l'attributo accept. (Anche IE lo supporta, a partire dalla versione 10). Tuttavia, è ancora presto per fare affidamento su di esso, poiché IE 8 e 9 non lo supportano ancora. E il supporto in generale è un po 'discutibile.

• Chrome sembra avere pieno supporto. Usa il proprio elenco di tipi interni così come quelli del sistema ... quindi se uno dei due definisce il tipo, Chrome sa quali file mostrare.
• IE 10 supporta splendidamente le estensioni dei file e i tipi MIME decentemente. Sembra che utilizzi solo la mappatura del sistema del tipo MIME alle estensioni, sebbene ... il che significa in sostanza che se qualcosa sul computer dell'utente non ha registrato quelle estensioni con i tipi MIME corretti, IE non mostrerà i file di quei tipi MIME.
• Opera sembra supportare solo i tipi MIME - al punto in cui le estensioni effettivamente disabilitano il filtro - e l'interfaccia utente per il selettore di file fa schifo. Devi selezionare un tipo per vedere i file di quel tipo.
• Firefox sembra supportare solo un numero limitato di tipi e ignora altri tipi e estensioni.
• Non ho Safari e non ho intenzione di scaricarlo. Se qualcuno può documentare il supporto di Safari ... Supporto parziale per il safari. http://caniuse.com/#search=accept

È consigliabile aggiungere l'attributo, in modo che i browser che lo supportano possano aiutare l'utente a trovare più facilmente i file giusti. Ma suggerirei comunque di controllare il nome del file dopo che il file è stato selezionato e mostrare un messaggio di errore se viene caricato un file con l'estensione errata.

Ovviamente, è necessario che il server verifichi che il file sia del tipo corretto. Le estensioni dei file sono solo una convenzione di denominazione e possono essere facilmente sovvertite.E anche se potessimo fidarci del browser (cosa che non possiamo), e anche se tentasse di filtrare le cose come chiesto (che potrebbe non essere), la possibilità che si verifichi effettivamente che quel file .doc sia veramente un documento di Word è vicino a zero.

Answer 2

si dovrebbe usare one of the plugins che utilizzano Flash embeded, poiché non è possibile farlo con semplice javascript

Answer 3

Non è possibile controllare quali file possono essere selezionati, ma si può leggere il nome del file con javascript dopo che il file viene scelto. È quindi possibile visualizzare un avviso e/o disabilitare il pulsante di invio se il file è di tipo errato. Tuttavia, ricorda che non puoi fare affidamento all'estensione per dirti se il file è veramente del tipo giusto. Dovrebbe essere trattato solo come un modo per aiutare gli utenti che altrimenti potrebbero perdere tempo a caricare un file enorme prima di scoprire di non supportare quel tipo di file.

Ecco qualche esempio di codice per farlo. Usa jQuery, ma potresti fare lo stesso anche in javascript.

$(function() { 
    $('#inputId').change(function() { 
     var filename = $(this).val(); 
     if (! /\.txt$/.test(filename)) { 
      alert('Please select a text file'); 
     } 
    }); 
}); 

Answer 4

Penso che stiate cercando il parametro accept. Prova questo funziona

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

Answer 5

Si dovrebbe usare MIME_type: Per esempio

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /> 

questo accetterà solo il tipo di file *.xlsx ...

Per l'elenco dei tipi MIME, controllare il link qui sotto :
http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/

Answer 6

Ho fatto un modo semplice f o validazione lato client per la maggior parte dei casi sul filtraggio dei file. In realtà è abbastanza semplice. Ora, prima di andare e provare a implementare questo, capisci che il server DEVE controllare questo file, perché il filtro javascript e HTML non è una cosa sicura nei casi in cui qualcuno modifica il file .js, o anche l'HTML. Non sto compresi tutti lo script vero per il semplice fatto che mi piace vedere altri implementano i concetti utilizzando una mente creativa, ma questi sono i passi che ho preso che sembrano funzionare finché non trovo una risposta migliore:

Creare un oggetto js che trova l'input e lo gestisce.

chiamare una funzione, come ad esempio l'OnClientUploadComplete per il controllo AsyncFileUpload del AjaxControlToolkit.

All'interno di questa funzione, dichiarare una variabile booleana: bIsAccepted (impostato su false) e stringa sFileName (dopo aver ottenuto il nome file dagli argomenti).

In un if..else,

if(sFilename.indexOf(".(acceptedExtension1)") || 
    sFileName.indexOf(".(AcceptedExtension2)")) 
{ 
    bIsAccepted = true; 
} 
else 
{ 
    bIsAccepted = false; 
} 

poi

if(bIsAccepted) 
{ 
//Process Data 
} 

Sul server, la creazione di un elenco di estensioni di file accettati e scorrendo e l'elaborazione in modo simile renderà il processo coesivo e coerente, consentendo efficacemente all'interfaccia utente e al Code-Behind di filtrare i tipi di file in quasi tutte le situazioni.

Dato che questo può essere aggirato modificando il nome di avere un'estensione di file diverso, come parte del nome, il tipo MIME devono essere controllate prima di inviare al server per ulteriori elaborazioni.

  [http://www.webmaster-toolkit.com/mime-types.shtml][1] 

Spero che questo aiuti!

Answer 7

Usando MVC possiamo limitare l'upload dei file zip solo

.HtmlAttributes(new { accept = ".zip*" }) 

Answer 8

Si potrebbe utilizzare Javascript. Prendi in considerazione il fatto che il grosso problema nel fare ciò con JavaScript è di resettare il file di input. Bene, questo limita solo JPG (per altri formati si dovrà cambiare la mime type e la magic number):

<form id="form-id"> 
    <input type="file" id="input-id" accept="image/jpeg"/> 
</form> 

<script type="text/javascript"> 
    $(function(){ 
     $("#input-id").on('change', function(event) { 
      var file = event.target.files[0]; 
      if(file.size>=2*1024*1024) { 
       alert("JPG images of maximum 2MB"); 
       $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
       return; 
      } 

      if(!file.type.match('image/jp.*')) { 
       alert("only JPG images"); 
       $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
       return; 
      } 

      var fileReader = new FileReader(); 
      fileReader.onload = function(e) { 
       var int32View = new Uint8Array(e.target.result); 
       //verify the magic number 
       // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures) 
       if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) { 
        alert("ok!"); 
       } else { 
        alert("only valid JPG images"); 
        $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
        return; 
       } 
      }; 
      fileReader.readAsArrayBuffer(file); 
     }); 
    }); 
</script> 

Prendere in considerazione che questo è stato testato su tutte le versioni di Firefox e Chrome, e l'IExplore 10.

For a complete list of mime types see Wikipedia.

For a complete list of magic number see Wikipedia.