1. API de fichier
HTML5 fournit deux méthodes: Fichier et FileReader, qui peuvent lire les informations de fichier et lire les fichiers.
2. Exemple
<html> <body> <div id = "test-image-proview" style = "border: 1px solide rgb (204, 204, 204); largeur: 100%; hauteur: 200px; background-size: contient; background-repeat: no-repeat; background-position: Center Center;"> </ div> <br/> <div id = "test-file-info" type = "file" id = "test-image-file"> <script type = "text / javascript"> var fileInput = document.getElementById ('test-iMage-file'), info = document.getElementById ('test-file-info'), préview = document.gettelementyid ('test-image-preview'); // écouter les événements de modification: fileInPut. () {// Image de fond: préciesseur 'Size:' + File.Size + '<br>' + 'modifié:' + file.lastModifiedDate; FileReader (); reader.readaSDataurl (fichier);}); </cript> </body> </html>Le fichier lu sous la forme de DataUrl est une chaîne, similaire à Data: Image / JPEG; Base64, / 9J / 4AAQSK ... (Base64 Encoding) ...
Couramment utilisé pour configurer des images. Si le traitement côté serveur est requis, envoyez la chaîne Base64 et les caractères suivants au serveur et décodez-le avec Base64 pour obtenir le contenu binaire du fichier d'origine.
3. Explication
Le code ci-dessus démontre également une caractéristique importante de JavaScript, qui est le mode d'exécution à fil unique. Dans JavaScript, le moteur d'exécution JavaScript du navigateur s'exécute toujours en mode unique lors de l'exécution du code JavaScript, ce qui signifie qu'à tout moment, il est impossible que le code JavaScript ait plus d'un thread exécuté en même temps.
Vous pourriez vous demander comment gérer le multitâche en mode unique?
Dans JavaScript, le multitâche est en fait appelé de manière asynchrone, comme le code ci-dessus:
Reader.ReadAsDataurl (fichier);
Une opération asynchrone sera lancée pour lire le contenu du fichier. Parce qu'il s'agit d'une opération asynchrone, nous ne savons pas quand l'opération se termine par du code JavaScript, nous devons donc définir d'abord une fonction de rappel:
reader.onload = function (e) {// Lorsque le fichier est lu, cette fonction est automatiquement appelée:};Une fois la lecture du fichier terminée, le moteur JavaScript appellera automatiquement la fonction de rappel que nous définissons. Lorsque la fonction de rappel est exécutée, le fichier a été lu, nous pouvons donc obtenir en toute sécurité le contenu du fichier dans la fonction de rappel.
L'exemple simple ci-dessus de l'aperçu du fichier de téléchargement JS est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.