123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <!doctype html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  5. </head>
  6. <body>
  7. <div id="name"></div>
  8. <div id="kv"></div>
  9. <div id="email"></div>
  10. <div id="tel"></div>
  11. <div id="item_name"></div>
  12. <div id="is_ide"></div>
  13. <div id="id_acc"></div>
  14. <div id="hr1"></div>
  15. <div id="form_ida"></div>
  16. <div id="form_idb"></div>
  17. <div id="form_acc"></div>
  18. <div id="form_main"></div>
  19. <div id="pdf"></div>
  20. <script>
  21. $(document).ready(function () {
  22. (function () {
  23. var hash = getUrlParameter('h');
  24. $.ajax({
  25. url: '/api2021/getinfo/' + hash,
  26. type: 'GET',
  27. async: false,
  28. timeout: 1000,
  29. success: function (data) {
  30. if (data.succ == true) {
  31. // 渲染活動
  32. $("#name").html('活動名稱: ' + data.info.name);
  33. $("#kv").html('活動主視覺: ' + '<img src="/' + data.info.kv + '" width="100">');
  34. $("#email").html('聯絡人信箱: ' + data.info.email);
  35. $("#tel").html('聯絡人電話: ' + data.info.tel);
  36. $("#item_name").html('獎項名稱: ' + data.info.item_name);
  37. $("#is_ide").html('是否要身分證: ' + data.info.is_ide);
  38. $("#id_acc").html('是否要存摺: ' + data.info.id_acc);
  39. $("#hr1").html('<hr>');
  40. // 渲染輸入物件
  41. $("#form_main").html('<hr>基本資料: <form id="main" enctype="application/x-www-form-urlencoded">' +
  42. '姓名: <input name="name" type="text" maxlength="50" /> <br>' +
  43. '身分證號: <input name="identity" type="text" maxlength="10" /> <br>' +
  44. '戶籍地址: <input name="add_host" type="text" maxlength="200" /> <br>' +
  45. '通訊地址: <input name="add_contact" type="text" maxlength="200" /> <br>' +
  46. '電話: <input name="tel" type="text" maxlength="20" /> <br>' +
  47. '<input id="ida_url" type="hidden" name="ida" />' +
  48. '<input id="idb_url" type="hidden" name="idb" />' +
  49. '<input id="acc_url" type="hidden" name="acc" />' +
  50. '<input type="submit" value="最後提交"/>' +
  51. '</form>');
  52. $('#main').on('submit', (function (e) {
  53. e.preventDefault();
  54. var formData = new FormData(this);
  55. $.ajax({
  56. type: 'POST',
  57. url: '/api2021/savedata/' + hash,
  58. data: formData,
  59. cache: false,
  60. contentType: false,
  61. processData: false,
  62. success: function (data) {
  63. if (data.succ == true) {
  64. $("#pdf").html('申報資料: ' + '<a href="/' + data.url + '" target="_blank">下載</a>');
  65. } else {
  66. alert(data.err);
  67. }
  68. },
  69. error: function (data) {
  70. }
  71. });
  72. }));
  73. // 渲染聯動物件
  74. if (data.info.is_ide == 'Y') {
  75. // 身分證正面
  76. $("#form_ida").html('身分證正面: <div id="ida_preview"></div><form id="ida" enctype="multipart/form-data"><input type="file" name="img" /><input type="hidden" name="type" value="ida" /><input type="submit" value="Upload"/></form>');
  77. $('#ida').on('submit', (function (e) {
  78. e.preventDefault();
  79. var formData = new FormData(this);
  80. $.ajax({
  81. type: 'POST',
  82. url: '/api2021/saveimg/' + hash,
  83. data: formData,
  84. cache: false,
  85. contentType: false,
  86. processData: false,
  87. success: function (data) {
  88. if (data.succ == true) {
  89. $("#ida_url").val(data.url);
  90. $("#ida_preview").html('預覽: ' + '<img src="/' + data.url + '" width="100">');
  91. } else {
  92. alert(data.err);
  93. }
  94. },
  95. error: function (data) {
  96. }
  97. });
  98. }));
  99. // 身分證反面
  100. $("#form_idb").html('身分證反面: <div id="idb_preview"></div><form id="idb" enctype="multipart/form-data"><input type="file" name="img" /><input type="hidden" name="type" value="idb" /><input type="submit" value="Upload"/></form>');
  101. $('#idb').on('submit', (function (e) {
  102. e.preventDefault();
  103. var formData = new FormData(this);
  104. $.ajax({
  105. type: 'POST',
  106. url: '/api2021/saveimg/' + hash,
  107. data: formData,
  108. cache: false,
  109. contentType: false,
  110. processData: false,
  111. success: function (data) {
  112. if (data.succ == true) {
  113. $("#idb_url").val(data.url);
  114. $("#idb_preview").html('預覽: ' + '<img src="/' + data.url + '" width="100">');
  115. } else {
  116. alert(data.err);
  117. }
  118. },
  119. error: function (data) {
  120. }
  121. });
  122. }));
  123. }
  124. if (data.info.id_acc == 'Y') {
  125. // 存摺
  126. $("#form_acc").html('存摺: <div id="acc_preview"></div><form id="acc" enctype="multipart/form-data"><input type="file" name="img" /><input type="hidden" name="type" value="acc" /><input type="submit" value="Upload"/></form>');
  127. $('#ACC').on('submit', (function (e) {
  128. e.preventDefault();
  129. var formData = new FormData(this);
  130. $.ajax({
  131. type: 'POST',
  132. url: '/api2021/saveimg/' + hash,
  133. data: formData,
  134. cache: false,
  135. contentType: false,
  136. processData: false,
  137. success: function (data) {
  138. if (data.succ == true) {
  139. $("#acc_url").val(data.url);
  140. $("#acc_preview").html('預覽: ' + '<img src="/' + data.url + '" width="100">');
  141. } else {
  142. alert(data.err);
  143. }
  144. },
  145. error: function (data) {
  146. }
  147. });
  148. }));
  149. }
  150. } else {
  151. alert(data.err);
  152. }
  153. },
  154. error: function (xhr) {
  155. }
  156. });
  157. })();
  158. });
  159. // 取得網址參
  160. var getUrlParameter = function getUrlParameter(sParam) {
  161. var sPageURL = window.location.search.substring(1),
  162. sURLVariables = sPageURL.split('&'),
  163. sParameterName,
  164. i;
  165. for (i = 0; i < sURLVariables.length; i++) {
  166. sParameterName = sURLVariables[i].split('=');
  167. if (sParameterName[0] === sParam) {
  168. return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
  169. }
  170. }
  171. return false;
  172. }
  173. </script>
  174. </body>
  175. </html>