Heim > Artikel > Web-Frontend > Wie füge ich einer HTML-Webseite eine Datei-Upload-Funktion hinzu?
Wie füge ich einer HTML-Webseite eine Datei-Upload-Funktion hinzu?
- 王林nach vorne
- 2023-09-04 12:29:051564Durchsuche
Einführung
In diesem Artikel führen wir Sie durch den Prozess des Hinzufügens der Funktion zum Hochladen von Dateien zu Ihrer Webseite. Wir zeigen Ihnen, wie Sie ein HTML-Formular mit Dateieingabefeldern erstellen und wie Sie ein Skript erstellen, das den Datei-Upload-Prozess übernimmt.
Methode
Wir können die folgenden zwei Methoden verwenden, um Datei-Upload-Funktionalität zu HTML-Webseiten hinzuzufügen -
Verwenden Sie ein einfaches HTML-Formular mit einem Dateieingabefeld
Mit jQuery und Ajax
Lassen Sie uns diese nun im Detail besprechen.
Methode 1: Verwenden Sie ein einfaches HTML-Formular mit einem Dateieingabefeld
Bei dieser Methode wird ein einfaches HTML-Formular erstellt, das ein Dateieingabefeld enthält, über das der Benutzer eine Datei zum Hochladen auswählen kann. Das Formular wird dann an ein serverseitiges Skript gesendet, das das eigentliche Speichern der Datei übernimmt.
Schritt 1 – Erstellen Sie eine Datei mit dem Namen index.html.
Schritt 2 – Erstellen Sie ein HTML-Formular mit einem Dateieingabefeld.
Beispiel
Lassen Sie uns dies anhand eines Beispiels besser verstehen.
Beispiel
Lassen Sie uns dies anhand eines Beispiels besser verstehen. >
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<h1>Welcome to Tutorials Point</h1>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedFile">
<input type="submit" value="Upload">
</form>
</body>
</html>
Dadurch wird ein HTML-Formular erstellt, das ein Dateieingabefeld enthält, in dem der Benutzer eine hochzuladende Datei auswählen kann, sowie eine Schaltfläche zum Senden des Formulars. Das Aktionsattribut ist auf „upload.php“ gesetzt, das serverseitige Skript, das Datei-Uploads verarbeitet. Das enctype-Attribut ist auf „multipart/form-data“ gesetzt, was für Datei-Uploads erforderlich ist.
Schritt 3 – Erstellen Sie ein serverseitiges PHP-Skript (action.php), um Datei-Uploads zu verarbeiten.
<?php
if(isset($_FILES['uploadedFile'])){
$errors= array();
$file_name = $_FILES['uploadedFile']['name'];
$file_size = $_FILES['uploadedFile']['size'];
$file_tmp = $_FILES['uploadedFile']['tmp_name'];
$file_type = $_FILES['uploadedFile']['type'];
$file_ext=strtolower(end(explode('.',$_FILES['uploadedFile']['name'])));
$extensions= array("jpeg","jpg","png");
if(in_array($file_ext,$extensions)=== false){
$errors[]="extension not allowed, please choose a JPEG or PNG file.";
}
if($file_size > 2097152) {
$errors[]='File size must be excately 2 MB';
}
if(empty($errors)==true) {
move_uploaded_file($file_tmp,"upload/".$file_name);
echo "Success";
}else{
print_r($errors);
}
}
?>
Dieses Skript prüft zunächst, ob das Dateieingabefeld eine Datei enthält, indem es die Funktion isset und die superglobale Variable $_FILES verwendet. Das Skript überprüft dann die Dateigröße und Dateierweiterung mithilfe der Funktion in_array und einer vordefinierten Liste zulässiger Dateierweiterungen. Wenn die Datei gültig ist, verschieben Sie sie mit der Funktion move_uploaded_file in das Verzeichnis „upload“ auf dem Server. Wenn die Datei ungültig ist, wird eine Fehlermeldung angezeigt.
Methode 2: Verwendung von jQuery und Ajax
Diese Methode ist eine fortgeschrittenere Methode zum Hochladen von Dateien, sodass Sie den Datei-Upload-Vorgang durchführen können, ohne die Seite zu aktualisieren.
Schritt 1 – Erstellen Sie eine Datei mit dem Namen index.html
Schritt 2 – Fügen Sie jQuery und das jQuery-Formular-Plugin in diese Datei ein –
Beispiel
Lassen Sie uns dies anhand eines Beispiels besser verstehen.
><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://malsup.github.io/jquery.form.js"></script>
Dieser Schritt beinhaltet das Einbinden von jQuery und der jQuery Form Plugin-Bibliothek in das HTML-Dokument. Mit diesen Bibliotheken können Sie den Datei-Upload-Prozess über JavaScript mithilfe der ajaxForm-Methode abwickeln.
Schritt 3 − HTML-Formular mit Dateieingabefeld erstellen -
<form id="fileUploadForm" action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="uploadedFile"> <input type="submit" value="Upload"> </form>
Dieser Schritt ähnelt Schritt 1 von Methode 1. Sie erstellen ein HTML-Formular, das ein Dateieingabefeld und eine Senden-Schaltfläche enthält, und legen das Aktionsattribut so fest, dass es auf das serverseitige Skript verweist, das den Datei-Upload verarbeitet, und setzen seitdem das enctype-Attribut auf „multipart/form-data“. Dort ist der Datei-Upload erforderlich.
Schritt 4 – Verwenden Sie jQuery für den Datei-Upload –
$(document).ready(function(){
$('#fileUploadForm').ajaxForm({
beforeSubmit: function(){
// do validation here
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var maxFileSize = 2097152; // 2 MB
var validFileExtensions = ["jpg", "jpeg", "png"];
var extension = file.name.split('.').pop().toLowerCase();
if(file.size > maxFileSize) {
alert("File size must be exactly 2 MB.");
return false;
}
if(validFileExtensions.indexOf(extension) === -1) {
alert("Invalid file type. Only JPEG and PNG files are allowed.");
return false;
}
},
success: function(response){
// handle response
var jsonResponse = JSON.parse(response);
if(jsonResponse.status === "success"){
alert("File upload successful!");
}else{
alert("File upload failed. Please try again.");
}
},
error: function(response){
// handle errors
alert("There was an error while uploading the file. Please try again later.");
}
});
});
Dieser Schritt beinhaltet die Verwendung von jQuery zur Abwicklung des Datei-Upload-Prozesses. Die ajaxForm-Methode wird verwendet, um das Formular über JavaScript zu senden, und die Funktionen beforeSubmit, success und error werden verwendet, um verschiedene Phasen des Datei-Upload-Prozesses zu verwalten.
Die beforeSubmit-Funktion wird verwendet, um die Datei vor dem Hochladen zu überprüfen, und die Erfolgsfunktion wird verwendet, um die Antwort des Servers nach dem Hochladen der Datei zu verarbeiten. Die Fehlerfunktion dient zur Behandlung etwaiger Fehler, die beim Datei-Upload auftreten.
Schritt 5 – Vollständiger HTML-Code mit jQuery-Code für die Datei index.html hier –
Beispiel
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://malsup.github.io/jquery.form.js"></script>
</head>
<body>
<h1>Greetings from Tutorials Point!</h1>
<form id="fileUploadForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedFile">
<input type="submit" value="Upload">
</form>
<script>
$(document).ready(function(){
$('#fileUploadForm').ajaxForm({
beforeSubmit: function(){
// do validation here
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var maxFileSize = 2097152; // 2 MB
var validFileExtensions = ["jpg", "jpeg", "png"];
var extension = file.name.split('.').pop().toLowerCase();
if(file.size > maxFileSize) {
alert("File size must be exactly 2 MB.");
return false;
}
if(validFileExtensions.indexOf(extension) === -1) {
alert("Invalid file type. Only JPEG and PNG files are allowed.");
return false;
}
},
success: function(response){
// handle response
var jsonResponse = JSON.parse(response);
if(jsonResponse.status === "success"){
alert("File upload successful!");
}else{
alert("File upload failed. Please try again.");
}
},
error: function(response){
// handle errors
alert("There was an error while uploading the file. Please try again later.");
}
});
});
</script>
</body>
</html>
Schritt 6 – Erstellen Sie ein serverseitiges PHP-Skript (upload.php), um Datei-Uploads zu verarbeiten –
<?php
if(isset($_FILES['uploadedFile'])){
$errors= array();
$file_name = $_FILES['uploadedFile']['name'];
$file_size = $_FILES['uploadedFile']['size'];
$file_tmp = $_FILES['uploadedFile']['tmp_name'];
$file_type = $_FILES['uploadedFile']['type'];
$file_ext=strtolower(end(explode('.',$_FILES['uploadedFile']['name'])));
$extensions= array("jpeg","jpg","png");
if(in_array($file_ext,$extensions)=== false){
$errors[]="extension not allowed, please choose a JPEG or PNG file.";
}
if($file_size > 2097152) {
$errors[]='File size must be excately 2 MB';
}
if(empty($errors)==true) {
move_uploaded_file($file_tmp,"upload/".$file_name);
echo "Success";
}else{
print_r($errors);
}
}
?>
Das Skript prüft zunächst, ob das Dateieingabefeld eine Datei enthält, indem es die Funktion isset und die superglobale Variable $_FILES verwendet. Das Skript überprüft dann die Dateigröße und Dateierweiterung mithilfe der Funktion in_array und einer vordefinierten Liste zulässiger Dateierweiterungen. Wenn die Datei gültig ist, verschieben Sie sie mit move_uploaded_file in das Verzeichnis „upload“ auf dem Server.
Fazit
In diesem Artikel haben wir zwei Möglichkeiten besprochen, um die Funktion zum Hochladen von Dateien in HTML-Webseiten hinzuzufügen. Die erste Methode besteht darin, ein einfaches HTML-Formular mit einem Dateieingabefeld zu verwenden und dieses Formular dann an ein serverseitiges Skript zu senden, das das eigentliche Speichern der Datei übernimmt. Die zweite Methode ist die Verwendung von jQuery und Ajax. Mit dieser Methode können Sie den Datei-Upload-Prozess durchführen, ohne die Seite zu aktualisieren.
Beide Methoden erfordern eine ordnungsgemäße Validierung, die richtige Art der Speicherung der Datei, die richtigen Berechtigungen auf der Serverseite und die richtige Art der Bereinigung des Dateinamens und der Erweiterung aus Sicherheitsgründen.
Das obige ist der detaillierte Inhalt vonWie füge ich einer HTML-Webseite eine Datei-Upload-Funktion hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!