JavaScript는 클라이언트 파일 선택 파일 및 IMG 태그로드 클라이언트 이미지를 구현하여 이미지 미리보기를 달성합니다.
테스트 브라우저 : Firefox6, Firefox12, Chrome 25.0.1364.172 M, IE6-IE10은 모두 호환됩니다.
Safari5.0.4는 filereader 및 file.files.item (0) .getasdataurl 메서드를 지원하지 않습니다. 당분간 해결책은 없습니다. 서버에 업로드하고 임시 파일 이름을 반환하고 IMG 태그로로드해야합니다. 후속 Safari 버전이 Filereader 객체를 지원하는지 여부는 모르겠습니다.
IE10 효과 :
IE9 효과 :
소스 코드 구현 :
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <head> <meta http-equiv = "content-type"content = "txt/html; charset = utf-8"/> <title> javaScript emplement </title> <i goning> // withon wonge wonate reating> // withing> // title> IE6은 IE6입니다. userAgent를 판단함으로써 반드시 (document.all) document.write ( '<!-[lte IE 6]> <script type = "text/javaScript"> window.ie6 = true <// script> <! [endif]->'); // var IE6 =/msie 6/i.test (navigator.useragent); // 권장되지 않음, 일부 시스템 'IE6 userAgent는 IE7 또는 IE8 기능 변경 (picid, fileId) {var pic = document.getElementById (picid); var file = document.getElementById (fileId); if (wind 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 (). 텍스트 // if (window.ie6) pic.src = reallocalpath; // IE6 브라우저는 IMG의 SRC를 로컬 경로로 설정하여 그림을 직접 표시하기 위해 {// IE6 버전 IE의 IE6 직접 설정 IMG의 SRC는 보안 문제로 인해 로컬 사진을 표시 할 수 없지만 필터를 통해 구현할 수 있습니다. IE10 브라우저는 필터를 지원하지 않으며 FilereAder를 사용하여 구현해야합니다. 따라서 Filereader First Pic.style.filter = "progid : dximagetransform.microsoft.alphaimageloader (sizateMethod = 'image', src =/" + reallocalpath + "/") "; pic.src = 'data : image/gif; base64, r0lgodlhaqabaiaaap /// waaach5baaaaaaaaaaaaaaaaaaaaaaaaaaicraeaow = // img의 src를 Base64에 의해 인코딩 된 투명한 그림으로 설정하고, red xx}를 표시하지 않을 것입니다. {// firefox6- if (file.files.item (0)) {url = file.files.item (0) .getasdataurl (); pic.src = url; }}}} </script> </head> <body> <form name = "form1"encType = "multipart/form-data"> <table> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <input type = "file"name = "id ="file1 "onchange ="change 1 '<td> <td> <td> <td> <td> </td> <td> <img src = "images/px.gif"id = "pic1"> </td> </tr> <tr> <td> 스케치 2 : </td> <td> <입력 유형 = "file"name = "file"id = "file2"onchange = "change ( 'pic2', 'sketch 2')"> </td> <td> <IMG SRC = "images/px.gif"id = "pic2"> </td> </tab> </table> </form> </body> </html>