Dieser Artikel teilt den spezifischen Code für die Implementierung der JavaScript -Bildvorschau -Funktion für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Zunächst werde ich Ihnen einen Code über die Vorschau von JS -Bild mit Ihnen mitteilen, die mit Firefox und Google Chrome kompatibel ist
/* Case -Anzeige Bild Vorschau*/$ (function () {$ ("#file0"). Bind ("ändern", function () {ClickUpload ();});}); Funktion ClickUpload () {var imgObject = document.getElementById ('Datei0'); var getImagesrc = GetFulLPath (ImgObject); // Local Pfad var srcs = window.url.createObjecturl (imgObject.files [0]); var pos = getImagesrc.lastindexof ("."); var lastname = getImagesrc.substring (pos, getImagesrc.length) // Bildsuffix] if (srcs! = "") {$ ("#yulan2"). attr ("src", srcs); } else {alert ("Bitte ein Bild auswählen"); }} function getfullPath (obj) {// den vollständigen Pfad des Bildes abrufen if (obj) {if (window.navigator.useragent.indexof ("msie")> = 1) {obj.select (); return document.Selection.Createrange (). Text; } else if (window.navigator.useragent.indexof ("Firefox")> = 1) {if (obj.files) {return window.url.createObjecturl (obj.files [0]); } return obj.value; } return obj.value; }}Der Beispielcode implementiert die rechtzeitige Vorschau des Bild -Uploads von JS:
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Image Upload Local Preview</title> <style type="text/css">#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}#imghead {filter: progid: dimaMagetRansform.microsoft.Alphaimageloader (SIZIZEMETHOD = Image);} </style> <script type = "text/javascript"> // IE verwendet Filter zum Hochladen und Vorschau von Bildern. Funktion PreviewImage (Datei) {var maxwidth = 260; var maxheight = 180; var div = document.getElementById ('Vorschau'); if (file.files && file.files [0]) {div.innerhtml = '<img id = imghead>'; var img = document.getElementById ('imghead'); img.onload = function () {var rect = clacimgzoomparam (maxwidth, maxheight, img.offsetwidth, img.offseteight); img.width = rect.width; img.height = rect.height; // img.style.marginleft = rect.left+'px'; img.style.margintop = rect.top+'px'; } var reader = new FileReader (); reader.onload = function (evt) {img.src = evt.target.result;} reader.readasDataurl (Datei.files [0]); } else // kompatibel mit IE {var sfilter = 'filter: progid: diximagetransform.microsoft.Alphaimageloader (Größenmethod = scale, src = "'; Datei.Select (); var src = document.selektion.sselektion.creeller (). document.getElementById ('imghead'); = ('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); style = 'width: "+rect.width+" px; Höhe: "+rect.height+" px; margin-top: "+rect.top+" px; "+sfilter+src+"/"> </div>"; Breite: Höhe: Höhe}; Math.round (width / rateHeigh); Höhe = 100 Border = 0 Src = '<%= Request.getContextPath ()%>/Images/default.jpg'> </div> <Eingabe type = "Datei" onchange = "previewImage (this)"/> </body> </html>>Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.