photo_uploader.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html lang="ko">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta http-equiv="Content-Script-Type" content="text/javascript">
  6. <meta http-equiv="Content-Style-Type" content="text/css">
  7. <title>사진 첨부하기 :: SmartEditor2</title>
  8. <style type="text/css">
  9. /* NHN Web Standard 1Team JJS 120106 */
  10. /* Common */
  11. body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
  12. body,input,textarea,select,button,table{font-family:'돋움',Dotum,Helvetica,sans-serif;font-size:12px}
  13. img,fieldset{border:0}
  14. ul,ol{list-style:none}
  15. em,address{font-style:normal}
  16. a{text-decoration:none}
  17. a:hover,a:active,a:focus{text-decoration:underline}
  18. /* Contents */
  19. .blind{visibility:hidden;position:absolute;line-height:0}
  20. #pop_wrap{width:383px}
  21. #pop_header{height:26px;padding:14px 0 0 20px;border-bottom:1px solid #ededeb;background:#f4f4f3}
  22. .pop_container{padding:11px 20px 0}
  23. #pop_footer{margin:21px 20px 0;padding:10px 0 16px;border-top:1px solid #e5e5e5;text-align:center}
  24. h1{color:#333;font-size:14px;letter-spacing:-1px}
  25. .btn_area{word-spacing:2px}
  26. .pop_container .drag_area{overflow:hidden;overflow-y:auto;position:relative;width:341px;height:129px;margin-top:4px;border:1px solid #eceff2}
  27. .pop_container .drag_area .bg{display:block;position:absolute;top:0;left:0;width:341px;height:129px;background:#fdfdfd url(../../img/photoQuickPopup/bg_drag_image.png) 0 0 no-repeat}
  28. .pop_container .nobg{background:none}
  29. .pop_container .bar{color:#e0e0e0}
  30. .pop_container .lst_type li{overflow:hidden;position:relative;padding:7px 0 6px 8px;border-bottom:1px solid #f4f4f4;vertical-align:top}
  31. .pop_container :root .lst_type li{padding:6px 0 5px 8px}
  32. .pop_container .lst_type li span{float:left;color:#222}
  33. .pop_container .lst_type li em{float:right;margin-top:1px;padding-right:22px;color:#a1a1a1;font-size:11px}
  34. .pop_container .lst_type li a{position:absolute;top:6px;right:5px}
  35. .pop_container .dsc{margin-top:6px;color:#666;line-height:18px}
  36. .pop_container .dsc_v1{margin-top:12px}
  37. .pop_container .dsc em{color:#13b72a}
  38. .pop_container2{padding:46px 60px 20px}
  39. .pop_container2 .dsc{margin-top:6px;color:#666;line-height:18px}
  40. .pop_container2 .dsc strong{color:#13b72a}
  41. .upload{margin:0 4px 0 0;_margin:0;padding:6px 0 4px 6px;border:solid 1px #d5d5d5;color:#a1a1a1;font-size:12px;border-right-color:#efefef;border-bottom-color:#efefef;length:300px;}
  42. :root .upload{padding:6px 0 2px 6px;}
  43. </style>
  44. </head>
  45. <body>
  46. <div id="pop_wrap">
  47. <!-- header -->
  48. <div id="pop_header">
  49. <h1>사진 첨부하기</h1>
  50. </div>
  51. <!-- //header -->
  52. <!-- container -->
  53. <!-- [D] HTML5인 경우 pop_container 클래스와 하위 HTML 적용
  54. 그밖의 경우 pop_container2 클래스와 하위 HTML 적용 -->
  55. <div id="pop_container2" class="pop_container2">
  56. <!-- content -->
  57. <form id="editor_upimage" name="editor_upimage" action="FileUploader.php" method="post" enctype="multipart/form-data" onSubmit="return false;">
  58. <div id="pop_content2">
  59. <input type="file" class="upload" id="uploadInputBox" name="Filedata">
  60. <p class="dsc" id="info"><strong>10MB</strong>이하의 이미지 파일만 등록할 수 있습니다.<br>(JPG, GIF, PNG, BMP)</p>
  61. </div>
  62. </form>
  63. <!-- //content -->
  64. </div>
  65. <div id="pop_container" class="pop_container" style="display:none;">
  66. <!-- content -->
  67. <div id="pop_content">
  68. <p class="dsc"><em id="imageCountTxt">0장</em>/10장 <span class="bar">|</span> <em id="totalSizeTxt">0MB</em>/50MB</p>
  69. <!-- [D] 첨부 이미지 여부에 따른 Class 변화
  70. 첨부 이미지가 있는 경우 : em에 "bg" 클래스 적용 //첨부 이미지가 없는 경우 : em에 "nobg" 클래스 적용 -->
  71. <div class="drag_area" id="drag_area">
  72. <ul class="lst_type" >
  73. </ul>
  74. <em class="blind">마우스로 드래그해서 이미지를 추가해주세요.</em><span id="guide_text" class="bg"></span>
  75. </div>
  76. <div style="display:none;" id="divImageList"></div>
  77. <p class="dsc dsc_v1"><em>한 장당 10MB, 1회에 50MB까지, 10개</em>의 이미지 파일을<br>등록할 수 있습니다. (JPG, GIF, PNG, BMP)</p>
  78. </div>
  79. <!-- //content -->
  80. </div>
  81. <!-- //container -->
  82. <!-- footer -->
  83. <div id="pop_footer">
  84. <div class="btn_area">
  85. <a href="#"><img src="../../img/photoQuickPopup/btn_confirm.png" width="49" height="28" alt="확인" id="btn_confirm"></a>
  86. <a href="#"><img src="../../img/photoQuickPopup/btn_cancel.png" width="48" height="28" alt="취소" id="btn_cancel"></a>
  87. </div>
  88. </div>
  89. <!-- //footer -->
  90. </div>
  91. <script type="text/javascript" src="jindo.min.js" charset="utf-8"></script>
  92. <script type="text/javascript" src="jindo.fileuploader.js" charset="utf-8"></script>
  93. <script type="text/javascript" src="attach_photo.js" charset="utf-8"></script>
  94. </body>
  95. </html>