Cet article partage le code spécifique pour l'implémentation de la fonction d'aperçu de l'image JavaScript pour votre référence. Le contenu spécifique est le suivant
Tout d'abord, je partagerai avec vous un code sur JS Image Preview, qui est compatible avec Firefox et Google Chrome
/ * Affichage d'affichage de cas Aperçu * / $ (function () {$ ("# file0"). Bind ("modifier", function () {clickupload ();});}); function clickupload () {var imgObject = document.getElementById ('file0'); var getImagesrc = getfullPath (imgObject); // chemin local var srcs = window.url.createObjectUrl (imgObject.files [0]); var pos = getImagesrc.LastIndexof ("."); var lastName = getImagesrc.SubString (pos, getImagesrc.Length) // Image suffix] if (srcs! = "") {$ ("# yulan2"). att ("src", srcs); } else {alert ("Veuillez sélectionner une image"); }} fonction getfullpath (obj) {// Obtenez le chemin complet de l'image if (obj) {if (window.navigator.useragent.indexof ("msie")> = 1) {obj.select (); return document.selection.createrange (). texte; } else if (window.navigator.useragent.indexof ("firefox")> = 1) {if (obj.files) {return window.url.createObjectUrl (obj.files [0]); } return obj.value; } return obj.value; }}L'exemple de code implémente l'aperçu en temps opportun du téléchargement d'image par JS:
<html> <éadfride> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> upload upload aperview </ title> <style type = "text / css"> # aperview {width: 260px; height: 190px; border: 1px solide # 000; {Filter: PROGID: dxiageTransform.microsoft.alphaimageLoader (sizeMethod = image);} </ style> <script type = "text / javascript"> // ie utilise des filtres pour télécharger et prévisualiser des images. Fonction PreviewImage (fichier) {var maxWidth = 260; var maxheight = 180; var div = document.getElementById ('aperçu'); if (file.files && file.files [0]) {div.innerhtml = '<img id = imghead>'; var img = document.getElementById ('imghead'); img.onload = function () {var rect = clacimgzoomAram (maxwidth, maxheight, img.offsetwidth, img.offsetheight); img.width = rect.width; img.height = rect.height; // img.style.marginleft = rect.left + 'px'; IMG.STYLE.MARGINTOP = RECT.TOP + 'PX'; } var leader = new fileReader (); reader.onload = function (evt) {img.src = evt.target.result;} reader.readaSDataurl (file.files [0]); } else // compatible avec ie {var sfilter = 'filter: PROGID: dxiagetransform.microsoft.alphaimageloader (sizethod = scale, src = "'; file.select (); var src = document.selection.creareAnGE (). Document.getElementByid («imghead»); = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height); style = 'width: "+ rect.width +" px; hauteur: "+ rect.height +" px; margin-top: "+ rect.top +" px; "+ sfilter + src +" / "'> </ div>"; Largeur: Largeur, hauteur}; Math.round (Width / RateHet); height = 100 border = 0 src = '<% = request.getContextPath ()%> / images / default.jpg'> </ div> <input type = "file" onChange = "aperviewImage (this)" /> </ body> </html>Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.