js implémente de pures compétences d'aperçu d'image frontale_javascript

Le téléchargement d'images est une fonction courante et l'aperçu de l'image est une sous-fonction essentielle de la fonction de téléchargement. Avant cela, j'avais l'habitude de m'abonner à l'événement onchange de l'élément input[type=file], de télécharger l'image sur le serveur une fois le chemin modifié, puis d'obtenir le chemin de l'image et de l'attribuer à l'élément img. Quelle que soit la solution de soumission asynchrone des fichiers, le nettoyage de ces images d'aperçu temporaires côté serveur a déjà augmenté considérablement la charge de travail.

J'ai accidentellement trouvé des informations pertinentes sur l'aperçu d'image purement frontal de MDN. Après les avoir triées, je les ai enregistrées pour référence future.

1. Préparation 1──FileReader　　　　　　　

FileReader est une nouvelle fonctionnalité de HTML5, utilisée pour lire les données de type Blob et File. L'utilisation spécifique est la suivante :

(1). Méthode de construction

var fr = new FileReader();
(2). Attributs

readyState : le type est unsigned short, l'état actuel de l'instance FileReader, (EMPTY——0, aucune donnée n'a été chargée ; LOADING——1, les données sont en cours de chargement ; DONE——2, toutes les demandes de lecture ont été terminé) , en lecture seule.

résultat : le contenu du fichier lu, en lecture seule.

erreur : le type est DOMError, indiquant une erreur survenue lors de la lecture du fichier, en lecture seule.

(3). Méthode

.

abort() : abandonnez l'opération de lecture et définissez readyState sur DONE. Lorsqu'aucune opération de lecture n'est effectuée, l'appel de cette méthode lèvera une exception DOM_FILE_ABORT_ERR.

readAsArrayBuffer(Blob blob) : lit les données, l'attribut de résultat est défini sur le type ArrayBuffer

readAsText(Blob blob [, encoding='utf-8']) : Lire les données, l'attribut de résultat est défini sur le type String

readAsBinaryString(Blob blob) : lit les données, l'attribut de résultat est défini sur les données binaires brutes

readAsDataURL(Blob blob) : lecture des données, l'attribut de résultat est défini sur le formulaire de schéma d'URI de données (pour plus de détails, veuillez visiter "JS Magic Hall : Introduction au schéma d'URI de données")

(4).Événement

onload : déclenché après une lecture réussie des données

onerror : déclenché lorsqu'une exception est levée lors de la lecture des données

onloadstart : déclenché avant la lecture des données

onloadend : déclenché après la lecture des données, déclenché après le chargement ou une erreur

onabort : déclenché après l'abandon de la lecture

onprogress : déclenché périodiquement pendant le processus de lecture

(5). Le navigateur prend en charge

.

FF3.6+, Chrome7+, IE10+

2. Préparation 2──Filtre DXImageTransform.Microsoft.AlphaImageLoader　　

(1). Fonction : La fonction principale est de rendre les images transparentes (IE5.5 ~ 6 ne prend pas en charge le png transparent)

(2). Comment l'utiliser dans les styles

#preview{
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="dummy.png");
}

(3). Comment l'utiliser en JS

var preview = document.getElementById('preview');
preview.style.filter = preview.currentStyle.filter + ";progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='dummy.png')";
preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src="dummy1.png";

(4). Attributs

activé : facultatif, définissez si le filtre est activé. Plage de valeurs vrai (par défaut), faux

sizingMethod : facultatif, définissez la façon dont l'image filtrée est affichée dans les limites du conteneur, la plage de valeurs recadre (coupe l'image pour l'adapter à la taille du conteneur), la taille de l'image (valeur par défaut, augmente ou diminue la taille du conteneur pour l'adapter à l'image). ), mettre à l'échelle (redimensionner l'image pour l'adapter à la taille du conteneur)

src : obligatoire, utilisez une URL absolue ou relative pour pointer vers l'image d'arrière-plan. Il est valide lorsque l'URL est l'adresse locale de l'ordinateur de l'utilisateur et lorsque le src de l'élément img est l'adresse locale de l'ordinateur de l'utilisateur, une exception qui ne permet pas l'accès au système de fichiers local sera levée.

Trois , mise en œuvre 　　　　　　　　　　

Ensuite, nous utiliserons readAsDataURL de FileReader pour obtenir le schéma d'URI de données afin d'implémenter la fonction de prévisualisation d'image dans IE5.5~9, nous utiliserons le filtre DXImageTransform.Microsoft.AlphaImageLoader pour le traitement de rétrogradation.

Fragment HTML :

<style type="text/css">
#preview{
  width: 100px;
  height: 100px;
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
  #preview{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
  }
</style>
<![endif]-->

<input type="file" onchange="showPreview(this);"/>
<div id="preview">
</div>

extrait js :

var preview = function(el){
  var pv = document.getElementById("preview");
  // IE5.5~9使用滤镜
  if (pv.filters && typeof(pv.filters.item) === 'function'){
    pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value;
  }
  else{
    // 其他浏览器和IE10+（不支持滤镜）则使用FileReader
    var fr = new FileReader();
    fr.onload = function(evt){
      var pvImg = new Image();
      pvImg.style.width = pv.offsetWidth + 'px';
      pvImg.style.height = pv.offsetHeight + 'px';
      pvImg.src = evt.target.result;
      pv.removeChild(0);
      pv.appendChild(pvImg);
    };
    fr.readAsDataURL(el.files[0]);
  }
};

4. Pièges

En raison de considérations de sécurité dans IE11, l'adresse réelle du fichier sélectionné par l'utilisateur ne peut pas être obtenue via value, externalHTML et getAttribute sur l'élément input[type=file] Seul le nom de fichier de C: fakepath peut être obtenu. . Par conséquent, si vous utilisez IE11, mais que le mode texte est défini en dessous de 10, il n'existe aucun moyen d'obtenir un aperçu de l'image.

Solution 1──Ajoutez cette phrase sous la balise head :

Solution 2── Utilisez document.selection.createRangeColleciton() pour obtenir la vraie adresse. L'opération spécifique est la suivante :

// 假设fileEl就是[type=file]元素
fileEl.select();
var filePath = document.selection.createRangeCollection()[0].htmlText; 

五、补充：使用window.URL.createObjectURL代替FileReader　　　　　　 

  通过FileReader的readAsDataURL方法获取的Data URI Scheme会生成一串很长的base64字符串，若图片较大那么字符串则更长，若页面出现reflow时则会导致性能下降。解决方案如下：

  1. 预览的img标签使用绝对定位，从而脱离正常文档流，那么就与文档的其他元素无关了，而reflow时则不会影响性能。

  2. 采用 window.URL.createObjectURL(Blob blob) 生成数据链接。

var createObjectURL = function(blob){
 return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
};

注意： window.URL.createObjectURL 生成的数据链接是独占内存的，因此若不时用时需要调用 window.URL.revokeObjectURL(DOMString objUrl) 来释放内存。在刷新页面时，也会自动释放内容。

var resolveObjectURL = function(blob){
 window[window.webkitURL ? 'webkitURL' : 'URL']['revokeObjectURL'](blob);
};

以上就是本文的全部内容，希望对大家的学习有所帮助。