この記事では、参照用のJavaScript画像プレビュー関数を実装するための特定のコードを共有しています。特定のコンテンツは次のとおりです
まず、FirefoxとGoogle Chromeと互換性のあるJS画像プレビューに関するコードを共有します
/*ケース表示画像プレビュー*/$（function（）{$（ "＃file0"）。bind（ "change"、function（）{clickupload（）;}）;}）; function clickupload（）{var imgobject = document.getElementbyid（ 'file0'）; var getimagesrc = getfullpath（imgobject）; //ローカルパスvar srcs = window.url.createobjecturl（imgobject.files [0]）; var pos = getimagesrc.lastindexof（ "。"）; var lastName = getImagesRc.Substring（pos、getImagesRc.length）// image suffix] if（srcs！= ""）{$（ "＃yulan2"）。attr（ "src"、srcs）; } else {alert（ "画像を選択してください"）; }} function getfullpath（obj）{//画像のフルパスを取得するif（obj）{if（window.navigator.useragent.indexof（ "msie"）> = 1）{obj.select（）; document.selection.createrange（）。テキストを返します。 } else if（window.navigator.useragent.indexof（ "firefox"）> = 1）{if（obj.files）{return window.url.createobjecturl（obj.files [0]）; } obj.valueを返します。 } obj.valueを返します。 }}この例コードは、JSによる画像アップロードのタイムリーなプレビューを実装しています。
<html> <head> <メタhttp-equiv = "content-type" content = "text/html; charset = utf-8"/> <title>画像アップロードローカルプレビュー</title> <style type = "text/css">＃pebreawiew {width：width：260px; {filter：progid：dmimagetransform.microsoft.alphaimageloader（sizingmethod = image）;} </style> <script = "text/javascript"> // IEはアップロードとプレビューの写真にフィルターを使用します。関数previewimage（file）{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：dimberagetransform.microsoft.alphaimageloader（sizingmethod = scale、src = "'; file.select（）; var src = document.selection.createrange（）。 document.getElementByid（ 'imghead'）; = 'rect：'+rect.top+'、'+rect.left+'、'+rect.width+'、'+rect.height）; style = 'width： "+rect.width+" px; height： "+rect.height+" px; rect.top+"px;"+sfilter+src+"/"'> </div>}幅、高さ}（widwidth> maxheight）{width / maxwidth = height / maxheight; math.round（width / height = maxheight = math.round） id = "imghead" width = 100 height = 100 border = 0 src = '<％= request.getcontextpath（）％>/default.jpg'> </div> <入力タイプ= "file" onchange = "previewimage（this）"/>> </body> </html>上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。