JavaScriptは、クライアントファイルの選択ファイルとIMGタグロードクライアントイメージを実装して、画像プレビューを実現します。
テストブラウザー：Firefox6、Firefox12、Chrome 25.0.1364.172 m、IE6-IE10はすべて互換性があります
Safari5.0.4は、FileReaderとfile.files.item（0）.getasdataurlメソッドをサポートしていません。当面は解決策はありません。それをサーバーにアップロードし、一時ファイル名を返し、IMGタグでロードする必要があります。その後のSafariバージョンがFilReaderオブジェクトをサポートしているかどうかはわかりません。
IE10効果：
IE9効果：
ソースコードの実装：
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "txt/html; charset = utf-8"/> <タイトル> javascript excantion ie、firefox client image </title </title> < IE6はIE6です。ユーザーエージェントが必ずしも正確ではないことを判断することにより、（document.all）document.write（ '<！ - [if lte ie 6]> <script type = "text/javascript"> window.ie6 = true <// script> <！[endif] - >'）; // var ie6 =/msie 6/i.test（navigator.useragent）; //推奨されていない、一部のシステム 'IE6ユーザーはIE7またはIE8関数の変更（picid、fileid）{var pic = document.getelementbyid（picid）; var file = document.getElementByID（fileID）; if（window.filereader）{// chrome、firefox7+、opera、ie10、ie9、ie9は、フィルターを使用してofreader = new fileReader（）を実装することもできます。 ofreader.readasdataurl（file.files [0]）; ofreader.onload = function（ofrevent）{pic.src = ofrevent.target.result;}; } else if（document.all）{// ie8- file.select（）; var reallocalpath = document.selection.createrange（）。テキスト// ie（window.ie6）pic.src = reallocalpathの下で実際のローカルファイルパスを取得します。 // IE6ブラウザーは、IMGのSRCをローカルパスに設定して画像を直接表示するために{// IE6バージョンIEのIMGのSRCを直接設定して、セキュリティの問題のためにローカル画像を表示できませんが、フィルターを通じて実装できます。 IE10ブラウザはフィルターをサポートせず、FilReaderを使用してそれを実装する必要があります。そのため、FileReader first pic.style.filter = "progid：dmimberagetransform.microsoft.alphaimageloader（sizingmethod = 'image'、src =/" " + reallocalpath +"/"）"; pic.src = 'data：image/gif; base64、r0lgodlhaqabaiaaaap /// waaach5baeaaaaaaaaaaaaaaaaaaaaicraaow =='; {// firefox6- if（file.files.item（0））{url = file.files.item（0）.getasdataurl（）; pic.src = url; }}} </scrip> </head> <body> <form name = "form1" enctype = "multipart/form-data"> <table> <tr> <td>スケッチ1：</td> <td> <入力タイプ= "ファイル" name "name1" file1 "id =" file1 "onchange ="変更</td> <td> <img src = "images/px.gif" id = "pic1"> </td> </tr> <tr> <td>スケッチ2：</td> <td> <入力タイプ= "file" name "name" name "file2" file2 "onchange =" change（ 'pic2'、 'file2'） </td> <td> <img src = "images/px.gif" id = "pic2"> </td> </tr> </table> </form> </body> </html>