Wenn Sie in Shenzhen arbeiten, benötigen Sie einen Benutzer, um die Avatar -Vorschau -Funktion hochzuladen! Ich habe viele von ihnen online gesucht, aber ich war nicht sehr zufrieden. Entweder ist es Blitz, oder es gibt den Bildpfad nach AJAX -Uploads zurück, oder es ist überhaupt unbrauchbar. Glücklicherweise hat jemand zuvor eine Bildvorschau -Funktion in diesem Projekt geschrieben, und ich habe es herausgenommen, um hier eine Aufzeichnung zu machen, um es mir zu erleichtern, sie in Zukunft und für andere in Not zu befindliche Verwendung von Freunden zu erleichtern!
Der Code ist einfach wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <kopf> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titels> by: page-function </title> <script-function = "text text setImagePreview (avalue) {var docoBj = document.getElementById ("doc"); var imgObjpreview = document.getElementById ("preview"); if (docobj.files && docobj.files [0]) {// unter Firefox, direkt das IMG -Attribut festlegen iMgOBJPJPREVUT. 'block'; imgobjpreview.style.width = '150px'; imgObjpreview.style.Height = '180px'; //imgobjpreview.src = docobj.files [0] .GetasDataurl (); // Die Version von Firefox 7 oder höher kann nicht mit der obigen GetasDataurl () -Methode erhalten werden. Sie benötigen die folgende Methode imgobjpreview.src = window.url.createObjecturl (docobj.files [0]);} ele {// Unter IE den Filter docobj.select (); var imgsrc = document.sselektion.crevere (). localImagid.style.width = "150px"; localImagid.style.height = "180px"; // Die Erfassung von Bildausnahmen verhindert, dass Benutzer das Suffix ändern, um das Bild zu fälschen try {localImagid.Style.filter = "progid: diximagetransform.microsoft.Alphaimageloader (Größenmethod = skalieren)"; localImagid.Filters.Item ("dimaTransform.MicroSoft.Alphaimageloader". Falsch, bitte auswählen! "); return false;} imgobjpreview.style.display = 'none'; document.Selection.Empty ();} return true;} </script> </head> <body> <body> <table cellpacing =" 0 "cellpadding =" 0 "> <tbody> <tr> <td alig =" center "> <divell id" <tbody> <tr> <td "<td Align". src = "http://blog.chuangling.net/public/images/top.jpg" style = "display: block; Breite: 150px; Höhe: 180px; "> </div> </td> </tr> <tr> <td align =" center "style =" padding-top: 10px; "> <input type =" file "name =" file "id =" doc "onchange =" javaScript: setImagepreview ();Tests können in IE8, FF12.0 und Google Chrome 28.0.1500.72 verwendet werden!