Ich muss nur eine Bilddatei hochladen über <input type="file"> Tag.
Zurzeit werden alle Dateitypen akzeptiert. Ich möchte es jedoch auf bestimmte Bilddateierweiterungen beschränken, darunter .jpg , .gif usw.
Wie kann ich diese Funktionalität erreichen?
Verwenden Sie die akzeptieren Attribut des Eingabe-Tags. Um nur PNGs, JPEGs und GIFs zu akzeptieren, können Sie den folgenden Code verwenden:
<label>Your Image File
<input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>Oder einfach:
<label>Your Image File
<input type="file" name="myImage" accept="image/*" />
</label>Beachten Sie, dass dies dem Browser nur einen Hinweis darauf gibt, welche Dateitypen dem Benutzer angezeigt werden sollen. Dies kann jedoch leicht umgangen werden, weshalb Sie die hochgeladene Datei immer auch auf dem Server validieren sollten.
Es sollte in IE 10+, Chrome, Firefox, Safari 6+, Opera 15+ funktionieren, aber die Unterstützung auf Mobiltelefonen ist sehr dürftig (Stand 2015) und einigen Berichten zufolge kann dies einige mobile Browser daran hindern, überhaupt etwas hochzuladen, daher sollten Sie Ihre Zielplattformen gut testen.
Detaillierte Informationen zur Browserunterstützung finden Sie unter http://caniuse.com/#feat=input-file-accept
Schritte:
1. Akzept-Attribut zum Eingabe-Tag hinzufügen
2. Validieren mit Javascript
3. Hinzufügen einer serverseitigen Validierung, um zu überprüfen, ob der Inhalt wirklich ein erwarteter Dateityp ist
Für HTML und javascript:
<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
function validateFileType(){
var fileName = document.getElementById("fileName").value;
var idxDot = fileName.lastIndexOf(".") + 1;
var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
//TO DO
}else{
alert("Only jpg/jpeg and png files are allowed!");
}
}
</script>
</body>
</html>Erläuterung:
Dies kann erreicht werden durch
<input type="file" accept="image/*" /> Aber das ist kein guter Weg. Sie müssen auf der Serverseite codieren, um zu prüfen, ob die Datei ein Bild ist oder nicht.
Prüfen, ob die Bilddatei ein echtes oder ein gefälschtes Bild ist
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
}
else {
echo "File is not an image.";
$uploadOk = 0;
}
}Weitere Informationen finden Sie hier
http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
