recherche

Maison  >  Article  >  interface Web  >  Exemple d'aperçu local avant les compétences de téléchargement d'image Javascript_javascript

Exemple d'aperçu local avant les compétences de téléchargement d'image Javascript_javascript

WBOY
WBOYoriginal
2016-05-16 16:44:161413parcourir

La fonction d'aperçu du téléchargement d'image est principalement utilisée pour prévisualiser un effet avant le téléchargement de l'image. Les méthodes traditionnelles actuelles incluent principalement js, jquery et flash, mais nous utilisons généralement js pour implémenter la fonction d'aperçu du téléchargement d'image. à un exemple.

Principe :

Il se divise en deux étapes : lorsque l'entrée de téléchargement de l'image est déclenchée et que l'image locale est sélectionnée, obtenir l'URL de l'objet de l'image à télécharger (URL de l'objet) attribuer l'URL de l'objet au src ; attribut de la balise img pré-écrite. Afficher l'image.

Ici, nous devons comprendre l'objet File, l'objet Blob et la méthode window.URL.createObjectURL() en Javascript.

Objet fichier :

L'objet File peut être utilisé pour obtenir des informations sur un fichier, et peut également être utilisé pour lire le contenu de ce fichier. Habituellement, l'objet File est l'objet FileList renvoyé après que l'utilisateur sélectionne un fichier sur un élément d'entrée, ou. cela peut provenir de l'objet DataTransfer généré par l'opération glisser-déposer
Regardons comment obtenir l'objet FileList :

.

Copier le code Le code est le suivant :





Objet Blob :

Un objet Blob est un objet de type fichier contenant des données brutes en lecture seule. Les données de l'objet Blob ne doivent pas nécessairement être sous la forme native en JavaScript. L'interface File est basée sur Blob, hérite des fonctions de. Blob, et étend la prise en charge d'un fichier local sur l'ordinateur de l'utilisateur.
L'URL de l'objet que nous souhaitons obtenir est en fait obtenue à partir de l'objet Blob, car l'interface File hérite de Blob. Convertissons l'objet Blob en URL :

Copier le code Le code est le suivant :


Compatibilité :

La méthode ci-dessus est applicable au navigateur Chrome
S'il s'agit d'un navigateur IE, vous pouvez utiliser directement la valeur d'entrée au lieu de src
Pour afficher les informations en ligne, vous pouvez directement utiliser la méthode getAsDataURL() du fichier objet pour obtenir l'URL. Maintenant, cette méthode a toutes été supprimées. Les méthodes similaires incluent getAsText() et getAsBinary().

Copier le code Le code est le suivant :

function getFullPath(obj) { //Obtenir l'image complète Chemin
if (obj) {
//ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
return document.selection.createRange().text;
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if ( obj.files) {
return obj.files.item(0).getAsDataURL();
}
return obj.value
}
return obj.value
}
}

Ce code permet d'obtenir le chemin complet de l'image client
Nous limiterons sa taille et son format

Copier le code Le code est le suivant :

$("#loadFile").change(function () {
var strSrc = $("#loadFile").val();
img = new Image();
img.src = getFullPath(strSrc);
//Vérifiez si le format du fichier téléchargé est correct
var pos = strSrc.lastIndexOf("."); strSrc. length)
if (lastname.toLowerCase() != ".jpg") {
alert("Le type de fichier que vous avez téléchargé est "lastname", et l'image doit être de type JPG"); 🎜> return false;
}
//Vérifiez le rapport hauteur/largeur du fichier téléchargé

if (img.height / img.width > 1.5 || img.height / img.width < ; 1.25) {
alert("Le rapport d'aspect que vous avez téléchargé est hors plage, le rapport hauteur/largeur doit être compris entre 1,25 et 1,5");
return
}
//Vérifiez si le fichier téléchargé dépasse la taille
if (img .fileSize / 1024 > 150) {
alert("La taille du fichier que vous avez téléchargé dépasse la limite de 150 Ko!"
return false;
}


Parmi eux, loadFile est l'identifiant du fichier d'entrée html. Dans son événement de changement, c'est-à-dire après avoir sélectionné le fichier à télécharger, souhaitez-vous que l'image soit affichée dans la zone d'image Ajoutez le code suivant à la fin du code ci-dessus ?

Copier le code Le code est le suivant :
$("#stuPic").attr ("src", getFullPath(this));


Puisque jQuery est utilisé, partageons un exemple de code écrit avec jQuery :

Copier le code Le code est le suivant :