La fonction d'aperçu de téléchargement d'image est principalement utilisée pour prévisualiser un effet avant le téléchargement d'image. Actuellement, les méthodes grand public incluent principalement JS, JQuery et Flash Implémentation, mais nous utilisons généralement JS pour implémenter la fonction d'aperçu du téléchargement d'image. Jetons un coup d'œil à un exemple ci-dessous.
principe:
Il est divisé en deux étapes: lorsque l'entrée du téléchargement de l'image est déclenchée et que l'image locale est sélectionnée, l'URL (URL de l'objet) de l'objet à télécharger; Attribuez l'URL de l'objet à l'attribut SRC de la balise IMG pré-écrite pour afficher l'image.
Ici, nous devons comprendre l'objet de fichier, l'objet Blob et la méthode Window.url.createObjectUrl () dans JavaScript.
Objet de fichier:
L'objet de fichier peut être utilisé pour obtenir des informations sur un fichier et peut également être utilisé pour lire le contenu du fichier. Généralement, l'objet de fichier provient de l'objet FileList renvoyé par l'utilisateur après avoir sélectionné un fichier sur un élément d'entrée, ou il peut être un objet DataTransfer généré par les opérations de glisser-déposer gratuites.
Jetons un coup d'œil à obtenir l'objet FileList:
La copie de code est la suivante:
<script type = "text / javascript" src = "jQuery.js"> </ script>
<input id = "upload" type = "file">
<img id = "préview" src = "">
<script type = "text / javascript">
$ ('# upload'). Change (function () {
// Obtenez le premier élément de FileList
alert (document.getElementById ('upload'). fichiers [0]);
});
</cript>
Objet blob:
Un objet BLOB est un objet de type fichier contenant des données brutes en lecture seule. Les données d'un objet BLOB ne doivent pas nécessairement être une forme native dans JavaScript. L'interface de fichier est basée sur Blob, hérite des fonctions de Blob et s'étend pour prendre en charge les fichiers locaux sur l'ordinateur de l'utilisateur.
L'URL de l'objet que nous voulons obtenir est réellement obtenue à partir de l'objet blob, car l'interface de fichier hérite du blob. Voici la conversion de l'objet blob en URL:
La copie de code est la suivante:
<script type = "text / javascript">
var f = document.getElementById ('upload'). fichiers [0];
var src = window.url.createObjectUrl (f);
document.getElementById ('Preview'). Src = src;
</cript>
compatibilité:
La méthode ci-dessus convient au navigateur Chrome
S'il s'agit d'un navigateur IE, vous pouvez utiliser directement la valeur d'entrée au lieu de SRC
Lorsque vous affichez des informations en ligne, vous pouvez utiliser directement la méthode getAsDataurl () de l'objet de fichier pour obtenir l'URL. Maintenant, cette méthode a été abolie. De même, il existe des méthodes getastext () et getasbinary (). Jetons un coup d'œil à un tel exemple.
La copie de code est la suivante:
fonction getfullpath (obj) {// Obtenez le chemin complet de l'image
if (obj) {
// c'est-à-dire
if (window.navigator.useragent.indexof ("msie")> = 1) {
obj.select ();
return document.selection.createrange (). texte;
}
// Firefox
else if (window.navigator.useragent.indexof ("firefox")> = 1) {
if (obj.files) {
return obj.files.item (0) .getAsDataurl ();
}
retour obj.value;
}
retour obj.value;
}
}
Ce code est le chemin complet pour obtenir l'image du client
Nous limiterons sa taille et son format
La copie de code est la suivante:
$ ("# loadfile"). Change (function () {
var strSrc = $ ("# loadfile"). Val ();
img = new image ();
img.src = getfullPath (strSrc);
// Vérifiez que le format de fichier de téléchargement est correct
var pos = strSrc.lasTindexof (".");
var lastName = strSrc.substring (pos, strsrc.length)
if (LastName.tolowerCase ()! = ".jpg") {
alert ("Le type de fichier que vous téléchargez est" + LastName + ", l'image doit être de type JPG");
retourne false;
}
// Vérifiez le rapport d'aspect du fichier téléchargé
if (img.height / img.width> 1.5 || img.height / img.width <1.25) {
alerte ("La proportion de l'image que vous téléchargez est au-delà de la plage, et le rapport d'aspect doit être compris entre 1,25-1,5");
retour;
}
// Vérifiez si le fichier téléchargé est surdimensionné
if (img.filesize / 1024> 150) {
alert ("La taille du fichier que vous téléchargez dépasse la limite de 150k!");
retourne false;
}
Parmi eux, LoadFile est l'ID du fichier d'entrée HTML. Après son événement de modification, c'est-à-dire qu'après avoir sélectionné le fichier à télécharger, laissez l'image afficher dans la zone d'image? Ajouter le code suivant à la fin du code ci-dessus
La copie de code est la suivante:
$ ("# stupide"). att ("src", getfullpath (this));
Étant donné que jQuery est utilisé, partageons un exemple de code écrit en jQuery:
La copie de code est la suivante:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head1">
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<script type = "text / javascript" src = "jQuery.js"> </ script>
<script linguisse = "javascript">
$ (function () {
var ei = $ ("# grand");
ei.hide ();
$ ("# img1"). MousMove (fonction (e) {
ei.css ({top: e.pagey, gauche: e.pagex}). html ('<img style = "border: 1px solide gris;" src = "' + this.src + '" />'). show ();
}). Mouseout (function () {
ei.hide ("lent");
})
$ ("# f1"). Change (function () {
$ ("# img1") .attr ("src", "fichier: ///" + $ ("# f1") .val ());
})
});
</cript>
<style type = "text / css">
#Large {Position: Absolute; Affichage: Aucun; Z-Index: 999;}
</ style>
</ head>
<body>
<form name = "form1" id = "form1">
<div id = "Demo">
<input id = "f1" name = "f1" type = "file" />
<img id = "img1">
</div>
<div id = "grand"> </div>
</ form>
</docy>
</html>