Télécharger un fichier en JavaScript avec un exemple
- Exemple de fichier de téléchargement à l’aide de JavaScript en HTML
- Autre moyen de télécharger/sélectionner un fichier à l’aide de JavaScript
Cet article explique comment nous pouvons sélectionner un fichier dans la boîte de dialogue du sélecteur de fichiers et télécharger le fichier sélectionné sur notre serveur en utilisant la méthode fetch. Nous devons ajouter nos données de fichier sélectionnées dans un objet de données de formulaire pour télécharger n’importe quel fichier sur notre stockage de serveur principal.
let formData = new FormData();
formData.append('file', fileupload.files[0]);
Exemple de fichier de téléchargement à l’aide de JavaScript en HTML
Nous allons créer un formulaire de saisie de type file pour sélectionner un fichier de n’importe quelle extension à partir de notre stockage pc/système. Il y aura un bouton pour appeler une fonction uploadFile() qui ajoutera des données de fichier dans un objet de données de formulaire et téléchargera simplement ces données de formulaire sur notre serveur en utilisant la méthode de récupération. La méthode fetch est utilisée en JavaScript pour les requêtes réseau en tant qu’appels d’API pour obtenir OU télécharger des données du front-end vers le back-end.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | File upload example
</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hi Users Choose your file and Click upload.</h2>
<!-- Input Form Elements HTML 5 -->
<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()"> Upload file </button>
<!-- File Upload Logic JavaScript -->
<script>
async function uploadFile() {
//creating form data object and append file into that form data
let formData = new FormData();
formData.append("file", fileupload.files[0]);
//network request using POST method of fetch
await fetch('PASTE_YOUR_URL_HERE', {
method: "POST",
body: formData
});
alert('You have successfully upload the file!');
}
</script>
</body>
<html>
Dans la source de page HTML ci-dessus, vous pouvez voir le type de formulaire de saisie simple de file pour obtenir les données du fichier à partir du stockage système local de l’utilisateur en cliquant sur choose file, et il y a un bouton Upload file pour appeler notre fonction déclarée et continuez avec la fonctionnalité.
Sur cette page Web frontale, vous pouvez également voir le nom avec l’extension de votre fichier sélectionné.
Ici, vous pouvez voir les balises <script>, qui sont nécessaires pour utiliser les instructions javaScript dans le doctype html. Dans ces balises, nous avons déclaré uploadFile().
La fonction contient un objet de données de formulaire, et le fichier sera ajouté à cet objet de données de formulaire et appellera la requête réseau avec la méthode fetch POST ; les données du fichier seront envoyées dans le corps du formulaire de la demande réseau.
À l’étape suivante, function() affiche une boîte d’alerte à l’utilisateur You have successfully upload the file! si le fichier est téléchargé avec succès.
Autre moyen de télécharger/sélectionner un fichier à l’aide de JavaScript
Vous pouvez également obtenir le même résultat comme indiqué ci-dessous. Vous pouvez créer un élément avec type=“file” en utilisant la méthode document.createElement().
Nous pouvons simplement accéder à un élément <input> avec type="file" en utilisant la méthode getElementById().
var data = document.getElementById('my_file');
<button onclick="myFunction()">Choose file</button>
<script>
function myTestFunction() {
var data = document.createElement("INPUT");
data.setAttribute("type", "file");
document.body.appendChild(data);
}
</script>
Dans les exemples ci-dessus, var data assigné avec un document.createElement("INPUT"); fonction, où nous devons définir l’attribut des données avec le type de fichier.
Dans l’étape suivante, nous devons appendChild avec des données sur document.body.