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

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) {

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

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

//Juge si le fichier est vide

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);
}
} );