Artikel ini membagikan kode spesifik untuk mengimplementasikan fungsi pratinjau gambar JavaScript untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Pertama, saya akan membagikan kepada Anda kode tentang pratinjau gambar JS, yang kompatibel dengan Firefox dan Google Chrome
/* Pratinjau gambar tampilan case*/$ (function () {$ ("#file0"). Bind ("ubah", function () {clickUpload ();});}); function clickUpload () {var imgobject = document.getElementById ('file0'); var getImageSrc = getfullpath (imgobject); // jalur lokal var srcs = window.url.createObjecUrl (imgobject.files [0]); var pos = getImageSrc.LastIndexOf ("."); var lastName = getImageSrc.substring (pos, getimageSrc.length) // gambar sufiks] if (srcs! = "") {$ ("#yulan2"). attr ("src", srcs); } else {alert ("Silakan pilih gambar"); }} function getfullpath (obj) {// Dapatkan jalur lengkap gambar if (obj) {if (window.navigator.useragent.indexof ("msie")> = 1) {obj.select (); return document.selection.createrange (). Teks; } else if (window.navigator.useragent.indexof ("firefox")> = 1) {if (obj.files) {return window.url.createObjecturl (obj.files [0]); } return obj.value; } return obj.value; }}Contoh kode mengimplementasikan pratinjau tepat waktu dari unggahan gambar oleh JS:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unggah gambar pratinjau lokal </title> <style type = "text/css">#preview {width: 260px; Tinggi: 190px; border: 1ps; {filter: progid: dximagetransform.microsoft.alphaimageloader (sizingMethod = gambar);} </tyle> <script type = "text/javascript"> // IE menggunakan filter untuk mengunggah dan mempratinjau gambar. function previewImage (file) {var maxwidth = 260; var maxheight = 180; var div = document.geteLementById ('pratinjau'); 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.offsetheight); 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 (file.files [0]); } else // Compatible with IE { var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = document.selection.createRange().text; div.innerHTML = '<img id=imghead>'; var img = Document.getElementByID ('Imghead'); = ('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); style = 'width: "+rect.width+" px; tinggi: "+rect.height+" px; margin-top: "+rect.top+" px; "+sfilter+src+"/"> </div>"; Lebar, Tinggi: Tinggi}; Math.Round (Width / RateHeight); width = 100 tinggi = 100 border = 0 src = '<%= request.getContextPath ()%>/images/default.jpg'> </div> <input type = "file" onchange = "previewImage (this)"/> </body> </ html>Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.