تشارك هذه المقالة الكود المحدد لتنفيذ وظيفة معاينة صورة JavaScript للرجوع إليها. المحتوى المحدد كما يلي
أولاً ، سأشارككم رمزًا حول معاينة صور JS ، وهو متوافق مع Firefox و Google Chrome
/* Case Display Image Preview*/$ (function () {$ ("#file0"). bind ("change" ، function () {clickupload () ؛}) ؛}) ؛ function clickupload () {var imgobject = document.getElementById ('file0') ؛ var getImagesRc = getFullPath (imgobject) ؛ // path path var srcs = window.url.createObjecturl (imgobject.files [0]) ؛ var pos = getImagesrc.lastIndexof (".") ؛ var lastName = getImagesRc.SubString (pos ، getImagesRc.Length) // صورة صورة] إذا (srcs! = "") {$ ("#yulan2"). attr ("src" ، srcs) ؛ } آخر {Alert ("الرجاء تحديد صورة") ؛ }} function getfullPath (obj) {// احصل على المسار الكامل للصورة if (obj) {if (window.navigator.useragent.indexof ("msie")> = 1) {obj.select () ؛ return document.selection.createRange (). text ؛ } آخر إذا (window.navigator.useragent.indexof ("firefox")> = 1) {if (obj.files) {return window.url.createObjecturl (obj.files [0]) ؛ } return obj.value ؛ } return obj.value ؛ }}ينفذ رمز المثال المعاينة في الوقت المناسب لتحميل الصورة بواسطة JS:
<html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> تحميل الصورة المعاينة المحلية </title> <style type = "text/css">#معاينة {العرض: 260px ؛ Quant: 190px ؛ {filter: progid: dimizageTransform.microsoft.alphaimageLoader (ZizeMethod = Image) ؛} </style> <script type = "text/javaScript"> // ie يستخدم مرشحات لتحميل الصور ومعاينتها. دالة معاينة (ملف) {var maxwidth = 260 ؛ var maxheight = 180 ؛ var div = document.getElementById ('Preview') ؛ 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 // متوافق مع ie {var sfilter = 'filter: progId: dimizageTransform.microsoft.alphaimageLoader (sizeMethod = scale ، src = "' '؛ document.getElementByid ('imghead') ؛ = 'Rect:'+rect.top+'،'+rect.left+'،'+rect.width+'،'+rect.hight) ؛ style = 'width: "+rect.width+" px ؛ height: العرض: الارتفاع: الارتفاع} ؛ Math.Round (العرض / rateheight) ؛ العرض = 100 ارتفاع = 100 الحدود = 0 src = '<٪ = request.getContextPath () ٪>/images/default.jpg'> </div> <input type = "file" onChange = "PreviewImage (this)"/> </body> </html>ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.