인터넷정보

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

알 수 없는 사용자 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>
  18. <form method=post name=write action=write_ok.php onsubmit="return check_submit();" enctype=multipart/form-data>
  19. <input type=file name=file1 size=33 maxlength=255 class=input onChange="img_filetype_view()"><br />
  20. <img id=view_1 width='100' style="display:none;">
  21. <br />
  22. <input type=file name=file2 size=33 maxlength=255 class=input onChange="img_filetype_view()"><br />
  23. <img id=view_2 width='100' style="display:none;">
  24. </form>



두번째 방법..,,..

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

'인터넷정보' 카테고리의 다른 글

산돌커뮤니케이션 폰트 무료 다운로드 행사  (0) 2007.10.18
올블스러운 이미지 클라우드 만들기  (0) 2007.10.18
올블스러운 이미지 클라우드 만들기  (0) 2007.10.18
onchang 이벤트 발생한적 있는지 검사하는 스크립트  (0) 2007.10.18
onchang 이벤트 발생한적 있는지 검사하는 스크립트  (0) 2007.10.18
이미지 업로드시 해당 이미지 파일 미리보기  (0) 2007.10.18
싸이월드 한달 출석하면 도토리 100개 무료 충전  (0) 2007.10.18
싸이월드 한달 출석하면 도토리 100개 무료 충전  (0) 2007.10.18
마우스 드래그 복사시 출처 자동복사  (0) 2007.10.18
마우스 드래그 복사시 출처 자동복사  (0) 2007.10.18

'인터넷정보'의 다른글

  • 현재글이미지 업로드시 해당 이미지 파일 미리보기

관련글

댓글

티스토리툴바