Utilisez les nouvelles fonctionnalités de HTML5 pour réaliser le téléchargement asynchrone de fichiers image_compétences du didacticiel HTML5

Il est très simple et pratique d'utiliser les nouvelles fonctionnalités de HTML5 pour télécharger des fichiers de manière asynchrone. Cet article montre principalement la partie JS et la structure HTML. Le code ci-dessous n'utilise pas de bibliothèque tierce. S'il existe une référence, veuillez faire attention à certains extraits de code qui ne sont pas affichés. L'aperçu de l'effet de mon côté :

1. Le fichier n'est pas sélectionné 2. Le fichier est sélectionné


Partie code HTML :

Idée : Dans le code ci-dessous, j'utilise l'attribut z-index du CSS pour masquer la balise input="file" sous l'élément id=btnSelect. Après avoir déclenché le clic de la balise a, la boîte de sélection du fichier apparaît. le masque ci-dessous est utilisé pour cliquer sur le bouton de confirmation pour empêcher les utilisateurs de cliquer à plusieurs reprises sur le bouton de confirmation >Le code est le suivant :

Cliquez pour sélectionner la photo à télécharger< /a>

Confirmer le téléchargement

-layer" style="max-width:90%">

La photo est en cours de téléchargement. ..

Partie de vérification du fichier image JS :

La partie de vérification est : la taille, s'il a été sélectionné, le type de fichier. La première méthode createObject consiste à créer le chemin d'aperçu du fichier image local. , et vérifiez s'il est vide, le type de fichier et la taille du fichier. Si les conditions ne sont pas remplies,

false sera renvoyé Si les trois conditions ci-dessus sont remplies, après les conditions, générez l'aperçu de l'image. dans le dom, ajoutez l'élément img, puis utilisez la méthode createObjectURL() pour obtenir le chemin d'aperçu :

Copier le code



Le code est le suivant :


//Obtenir l'adresse URL des données
fonction createObjectURL(blob) {
if (window.URL) {

return window.URL.createObjectURL(blob);

} else if (window.webkitURL) {
return window.webkitURL.createObjectURL(blob); {

return null;

} } //Détection de fichierfunction checkFile() { //Obtenir le fichier

var file = $$( "uploadFile") .files[0];

//Juge si le fichier est vide

if (file === null || file === non défini) {

alert("Veuillez sélectionner le fichier que vous souhaitez télécharger document! ");
$$("btnSelect").innerHTML = "Cliquez pour sélectionner la photo à télécharger";
return false;
}
//Détecter le type de fichier
if(file .type.indexOf('image') === -1) {
alert("Veuillez sélectionner un fichier image!");
return false
}
//Calculer la taille du fichiervar size = Math.floor(file.size/1024);
if (size > 5000) {
alert("Le fichier téléchargé ne doit pas dépasser 5 Mo !");
};
//Ajouter une image d'aperçu
$$("btnSelect").innerHTML = "";
};



Partie de requête JS Ajax :

Description : Le premier écouteur concerne les événements de modification de sélection de fichier. Une fois les conditions de vérification remplies, l'aperçu est effectué. exécuté. Le deuxième écouteur d'événement est Écoutez la réponse de la fenêtre contextuelle lorsque vous cliquez sur btnSelect. Voici la surveillance des événements du bouton de téléchargement de confirmation pour commencer à envoyer la requête Ajax. Objet XMLHttpRequest. Je n'ai pas posté le code, y compris la méthode addEventListener(), ces 2 parties peuvent faire référence à d'autres articles >Le code est le suivant :
.

Copier le code
//Écouter les changements d'adresse URL de l'image
addEventListener($$("uploadFile"), "change", function() {
checkFile();
} );
//Écoutez pour cliquer sur le bouton de sélection de fichier
addEventListener($$("btnSelect"), "click", function() {
//Ouvrez la boîte de sélection de fichier
$$("uploadFile").click();
});
//Écoutez l'événement de clic du bouton de téléchargement de confirmation
addEventListener($$("btnConfirm"), "click", function(e) {
if (checkFile()) {
try {
//Effectuer l'opération de téléchargement var xhr = createXHR();
$$("maskLayer").style.display = "bloquer";
xhr.open("post","/uploadPhoto.action", true
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); .onreadystatechange = function() {
if (xhr.readyState == 4) {
var flag = xhr.responseText;
if (flag == "success") {
alert("Image téléchargé avec succès!");
} else {
alert("Image téléchargée avec succès!");
};
$$("maskLayer").style.display = "none";
};
} ;
//Données du formulaire
var fd = new FormData();
fd.append("maPhoto", $$("uploadFile").files[0] );
//Exécuter Envoyer
xhr.send(fd);
} catch (e) {
console.log(e);
}
} );

Ce qui précède sont toutes les principales parties du code. Si vous avez des questions, veuillez me contacter et n'hésitez pas à communiquer.