¡Cuando trabaja en Shenzhen, necesita un usuario para cargar la función de vista previa del avatar! Busqué muchos de ellos en línea, pero no estaba muy satisfecho. O es flash, o devuelve la ruta de imagen después de que Ajax se carga, o es inutilizable en absoluto. Afortunadamente, alguien escribió una función de vista previa de imágenes en este proyecto antes, ¡y lo saqué para hacer un disco aquí para facilitarme usarla en el futuro y para otros amigos necesitados!
El código es simple, como sigue:
< xmlns = "http://www.w3.org/1999/xhtml"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> by: dragondean </titter> <scryt type = "text/javascript"> // El siguiente se utiliza setImagePReview (avalue) {var docobj = document.getElementById ("doc"); var imgobjpreview = document.getElementById ("previsual"); if (docobj.files && docobj.files [0] {// en Firefox, establece directamente el atributo imgobjpreview.dyle.dyle.dyle. 'block'; imgobjpreview.style.width = '150px'; imgobjpreview.style.height = '180px'; //imgobjpreview.src = docobj.files [0] .getAsdataurl (); // La versión de Firefox 7 o superior no se puede obtener utilizando el método getAsDataurl () anterior. Necesita el siguiente método imgobjpreview.src = window.url.createObjectUrl (docobj.files [0]);} else {// en IE, use el filtro docobj.select (); var imgsrc = document.selection.createrGeNange (). Text; var localImagid = document.getEngetByid ("localImag"); localimagid.style.width = "150px"; localimagid.style.height = "180px"; // La captura de excepciones de imagen evitará que los usuarios modifiquen el sufijo para forjar la imagen Pruebe {localImagid.style.filter = "progid: dximagetransform.microsoft.alphaimageloader (dimensionador incorrecto, por favor seleccione nuevamente! "); return false;} imgobjpreview.style.display = 'none'; document.selection.empty ();} return true;} </script> </head> <body> <table cellPacing =" 0 cellPadding = "0"> <tbody> <tr> <Td Align = "Center"> <ivi Id "localiz id = "Preview" src = "http://blog.chuangling.net/public/images/top.jpg" style = "Display: block; Ancho: 150px; altura: 180px; "> </div> </td> </tr> <tr> <td align =" center "style =" padding-top: 10px; "> <input type =" file "name =" archivo "id =" doc "onchange =" javascript: setImagePreview (); "> </td> </trbody> </table>¡Las pruebas se pueden usar en IE8, FF12.0 y Google Chrome 28.0.1500.72!