Lorsque vous travaillez à Shenzhen, vous avez besoin d'un utilisateur pour télécharger la fonction d'aperçu Avatar! J'en ai cherché beaucoup en ligne, mais je n'étais pas très satisfait. Soit c'est du flash, soit il renvoie le chemin d'image après les téléchargements AJAX, soit il est inutilisable du tout. Heureusement, quelqu'un a déjà écrit une fonction d'aperçu de l'image dans ce projet, et je l'ai retirée pour faire un enregistrement ici pour me faciliter l'utilisation à l'avenir et pour d'autres amis dans le besoin!
Le code est simple, comme suit:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> par: dragontean </ title> <script function = "text / javascrip setImagePreView (Avalue) {var docoBj = document.getElementById ("doc"); var imgobjpreview = document.getElementById ("Preview"); if (docobj.files && docobj.files [0]) {// sous Firefox, définit directement l'attribut imgobjpreview.style.display = 'block'; imgobjpreview.style.width = '150px'; imgobjpreview.style.height = '180px'; //imgobjpreview.src = docobj.files [0] .getasdataurl (); // La version de Firefox 7 ou supérieure ne peut pas être obtenue en utilisant la méthode getasdataurl () ci-dessus. Vous avez besoin de la méthode suivante imgobjpreview.src = window.url.createObjectUrl (docobj.files [0]);} else {// sous IE localimagid.style.width = "150px"; localimagid.style.height = "180px"; // la capture des exceptions d'image empêchera les utilisateurs de modifier le suffixe à forger try{localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;}catch(e){alert("The image you uploaded is Incorrect, veuillez sélectionner à nouveau! "); return false;} imgobjpreview.style.display = 'non'; document.selection.empty ();} return true;} </cript> </ad> <body> <table cellpacing =" 0 "cellpadding =" 0 "> <tbody> <tr> <td align =" Center "> <v Id =" local "> <tr> <td align =" Center "> <Tiv Id =" id = "Preview" src = "http://blog.chuangling.net/public/images/top.jpg" style = "Display: Block; Largeur: 150px; Hauteur: 180px; "> </ div> </td> </tr> <tr> <td align =" Center "style =" padding-top: 10px; "> <input type =" file "name =" file "id =" doc "onchange =" javascript: setimagepreview (); "> </td> </tr> </tbody>Les tests peuvent être utilisés dans IE8, FF12.0 et Google Chrome 28.0.1500.72!