인터넷정보

이미지 업로드시 해당 이미지 파일 미리보기

알 수 없는 사용자 2007. 10. 18. 13:24
첫번째 방법..,,..

  1. <script>
  2. function img_filetype_view()
  3. {
  4.     img_views = "view_" + event.srcElement.name.split("file")[1];
  5.     
  6.     if(event.srcElement.value.match(/(.jpg|.jpeg|.gif|.png|.bmp|.pdf)$/))
  7.     {
  8.         document.images[img_views].src = event.srcElement.value;
  9.         document.images[img_views].style.display = "";
  10.     }
  11.     else
  12.     {
  13.         document.images[img_views].style.display = "none";
  14.     }
  15. }
  16. </script>
  17. <form method=post name=write action=write_ok.php onsubmit="return check_submit();" enctype=multipart/form-data>
  18. <input type=file name=file1 size=33 maxlength=255 class=input onChange="img_filetype_view()"><br />
  19. <img id=view_1 width='100' style="display:none;">
  20. <br />
  21. <input type=file name=file2 size=33 maxlength=255 class=input onChange="img_filetype_view()"><br />
  22. <img id=view_2 width='100' style="display:none;">
  23. </form>



두번째 방법..,,..

-- http://suldo.zotta.net/
  1. <html>
  2. <head>
  3. <script language="javascript">
  4. function addTempImage ()
  5. {
  6. document.ImgForm.contents.value=document.ImgForm.photo.value;
  7. document.ImgForm.submit();
  8. }
  9. function PhotoPrev(form)
  10. {
  11. if (form.photo.value) {
  12. form.img1.src = form.photo.value;
  13. //document.all['photo'].style.display="block"
  14. }
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <table>
  20. <tr>
  21. <form name="ImgForm" action="" method="post" enctype="multipart/form-data">
  22. <td>
  23. <input type="hidden" name="contents">
  24. <input type="file" name="photo" size="20" onFocus="PhotoPrev(this.form);">
  25. <input type="button" value="전송" onClick="addTempImage(this.form);"></td><tr>
  26. <tr><td>
  27. <img src="./images/t.gif" name="img1" alt="현재그림" border="0">
  28. </form>
  29. </body>
  30. </html>



세번째 방법..,,.
 

  1. <script type="text/javascript">
  2. function imgPreview(img_el)
  3. {
  4. if(event.srcElement.value.match(/(.jpg|.jpeg|.gif|.png)/)) {
  5.     document.getElementById(img_el).src = event.srcElement.value;
  6. }
  7. }
  8. </script>
  9. <img id='pre' border='0'><input type="file" name="" onchange="imgPreview('pre')">
     

    사용법
    input file에 onchange에 이벤트를 등록하고 이미지가 미리보일  이미지 엘리먼트의 id값을 인자로 던져주면 됩니다. 간단히 jpg,jpeg,gif,png파일인지 확인하고 맞으면 이미지를 보여줍니다.


네번째 방법..,,.

IE7 용은...

ie7에서는 아래와 같이 background속성으로 넣어주면 이미지가 표시됩니다.

  1. <html>
  2. <body>
  3.     <script>
  4.     function previewImage(obj)
  5.     {
  6.         var dest    = document.getElementById("preview");
  7.         dest.style.background    = "url(" + obj.value + ") no-repeat";
  8.     }
  9.     </script>
  10.     <input type="file" onchange="previewImage(this)">
  11.     <br><br>
  12.     <div id="preview" style="width:100px; height:100px"></div>
  13. </body>
  14. </html>




다섯번째 방법..,,.

사이즈는...

  1. <html>
  2. <head>
  3.     <script>
  4.     function previewImage(obj)
  5.     {
  6.         var dest    = document.getElementById("preview");
  7.         var img = new Image();
  8.         img.src = obj.value;
  9.         dest.style.width = img.width + "px";
  10.         dest.style.height = img.height + "px";
  11.         dest.style.background    = "url(" + obj.value + ") no-repeat";
  12.     }
  13.     </script>
  14. </head>
  15. <body>
  16.     <input type="file" onchange="previewImage(this)" />
  17.     <br /><br />
  18.     <div id="preview" style="width:100px; height:100px"></div>
  19. </body>
  20. </html>


FF는 안되요..;;
반응형