So erstellen Sie einen Eingabetyp = Datei Sollte nur PDF und XLS akzeptieren

ich benutzte <input type= "file" name="Upload" >

Jetzt möchte ich dies einschränken, indem ich nur PDF- und XLS-Dateien akzeptiere.

Wenn ich auf die Schaltfläche "Senden" klicke, sollte dies überprüft werden.

Und wenn ich auf die Dateien (PDF / XLS) auf der Webseite klicke, sollte sie automatisch geöffnet werden.

Könnte jemand bitte einige Beispiele dafür geben?

Sie können dies tun, indem Sie das Attribut verwenden acceptund zulässige MIME-Typen hinzufügen. Aber nicht alle Browser respektieren dieses Attribut und es könnte leicht über einen Code-Inspektor entfernt werden. In beiden Fällen müssen Sie also den Dateityp auf der Serverseite überprüfen (Ihre zweite Frage).

Beispiel:

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

Zu Ihrer dritten Frage "Und wenn ich auf die Dateien (PDF / XLS) auf der Webseite klicke, sollte sie automatisch geöffnet werden.":

Das kann man nicht erreichen. Wie ein PDF oder XLS auf dem Client-Computer geöffnet wird, wird vom Benutzer festgelegt.

Sie können dies verwenden:

HTML

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

nur Unterstützung. PDF und. XLS- Dateien

Leider gibt es zum Zeitpunkt der Auswahl keine garantierte Möglichkeit, dies zu tun.

Einige Browser unterstützen das acceptAttribut für inputTags. Dies ist ein guter Anfang, auf den man sich jedoch nicht vollständig verlassen kann.

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

Sie können einen verwenden cfinputund eine Validierung ausführen , um die Datei zu überprüfen Erweiterung bei Vorlage, aber nicht den MIME-Typen. Das ist besser, aber immer noch nicht narrensicher. Dateien unter OSX haben häufig keine Dateierweiterungen, oder Benutzer können die Dateitypen in böswilliger Absicht falsch kennzeichnen.

ColdFusions cffilekönnen den MIME-Typ anhand der contentTypeEigenschaft von result ( cffile.contentType) überprüfen , dies kann jedoch erst nach dem Hochladen erfolgen. Dies ist Ihre beste Wahl, aber immer noch nicht 100% sicher, da Mimetypen immer noch falsch sein können.

Sie könnten JavaScript verwenden. Beachten Sie, dass das große Problem bei der Verwendung von JavaScript darin besteht, die Eingabedatei zurückzusetzen. Nun, dies beschränkt sich nur auf JPG (für PDF müssen Sie den MIME-Typ und die magische Zahl ändern ):

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

Beachten Sie, dass dies auf den neuesten Versionen von Firefox und Chrome sowie auf IExplore 10 getestet wurde.

Eine vollständige Liste der MIME-Typen finden Sie in Wikipedia .

Eine vollständige Liste der magischen Zahlen finden Sie in Wikipedia .

Ich würde die Dateiserverseite filtern, da es Tools wie Live-HTTP-Header in Firefox gibt, mit denen jede Datei, einschließlich einer Shell, hochgeladen werden kann. Leute könnten Ihre Seite hacken. Tun Sie es Server-Site, um sicher zu sein.

Während dieses Beispiel für einen Upload mehrerer Dateien gedacht ist, enthält es die allgemeinen Informationen, die benötigt werden:

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

Soweit auf eine Datei bei / download / reagiert wird, handelt es sich nicht um eine Javascript-Frage, sondern um eine Serverkonfiguration. Wenn ein Benutzer nichts zum Öffnen von PDF- oder XLS-Dateien installiert hat, kann er diese nur herunterladen.

Wenn Sie möchten, dass das Steuerelement zum Hochladen von Dateien die Dateitypen begrenzt, die Benutzer mit einem Klick auf eine Schaltfläche hochladen können, ist dies der richtige Weg.

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

Sie können die Funktion dann von einem Ereignis wie dem onClick der obigen Schaltfläche aus aufrufen, das wie folgt aussieht:

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

Sie können dies ändern in: PDFundXLS

Sie können es hier sehen: Demo