Come rendere input type = file Dovrebbe accettare solo pdf e xls

ero solito <input type= "file" name="Upload" >

Ora vorrei limitare questo accettando solo file .pdf e .xls.

Quando faccio clic sul pulsante di invio, dovrebbe convalidarlo.

E quando clicco sui file (PDF / XLS) nella pagina web, dovrebbe aprirsi automaticamente.

Qualcuno potrebbe fornire alcuni esempi per questo?

Puoi farlo usando l'attributo accepte aggiungendovi i tipi MIME consentiti. Ma non tutti i browser rispettano questo attributo e potrebbe essere facilmente rimosso tramite un ispettore del codice. Quindi in entrambi i casi è necessario controllare il tipo di file sul lato server (la seconda domanda).

Esempio:

<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />

Alla tua terza domanda "E quando clicco sui file (PDF / XLS) nella pagina web, dovrebbe aprirsi automaticamente.":

Non puoi ottenerlo. La modalità di apertura di un PDF o XLS sulla macchina client viene impostata dall'utente.

puoi usare questo:

HTML

<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />

solo supporto. PDF e. File XLS

Sfortunatamente, non esiste un modo garantito per farlo al momento della selezione.

Alcuni browser supportano l' acceptattributo per i inputtag. Questo è un buon inizio, ma non ci si può fidare completamente.

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

È possibile utilizzare un cfinputed eseguire una convalida per controllare l' estensione del file al momento dell'invio, ma non il tipo MIME. Questo è meglio, ma ancora non infallibile. I file su OSX spesso non hanno estensioni di file o gli utenti potrebbero etichettare erroneamente i tipi di file.

ColdFusion cffilepuò controllare il tipo mime usando la contentTypeproprietà di result ( cffile.contentType), ma ciò può essere fatto solo dopo il caricamento. Questa è la soluzione migliore, ma non è ancora sicura al 100% poiché i tipi mimo potrebbero comunque essere sbagliati.

Potresti usare JavaScript. Tieni presente che il grosso problema nel fare questo con JavaScript è ripristinare il file di input. Bene, questo si limita solo a JPG (per PDF dovrai cambiare il tipo MIME e il numero magico ):

<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>

Tieni presente che questo è stato testato sulle ultime versioni di Firefox e Chrome e su IExplore 10.

Per un elenco completo dei tipi MIME vedere Wikipedia .

Per un elenco completo dei numeri magici vedere Wikipedia .

Filtrerei i file lato server, perché ci sono strumenti, come Live HTTP Headers su Firefox, che consentirebbero di caricare qualsiasi file, inclusa una shell. Le persone potrebbero hackerare il tuo sito. Fallo sul sito del server, per sicurezza.

Sebbene questo particolare esempio riguardi un caricamento di più file, fornisce le informazioni generali necessarie:

https://developer.mozilla.org/en-US/docs/DOM/File.type

Per quanto riguarda l'azione su un file durante / download /, questa non è una domanda Javascript, ma piuttosto una configurazione del server. Se un utente non ha installato qualcosa per aprire file PDF o XLS, la sua unica scelta sarà scaricarli.

Se vuoi che il controllo di caricamento dei file limiti i tipi di file che l'utente può caricare su un pulsante, fai clic su questo è il modo.

<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') : 
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>

È quindi possibile chiamare la funzione da un evento come onClick del pulsante sopra, che assomiglia a:

onClick = "TestFileType (this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"

Puoi cambiarlo in: PDFeXLS

Puoi vederlo implementato qui: Demo