123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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. <a href="../private/02.jpg" target="_blank">範例圖片下載</a><br/>
  8. <input type="file" value="瀏覽一個交易完成圖片" id="add_image"><br/>
  9. <input type="button" value="OK" id="add_done"><br/>
  10. <input type="button" value="清除" id="clear"><br/>
  11. 訂單編號: <input type="text" id="order_no"/><br/>
  12. 銀行代碼: <input type="text" id="account_bank"/><br/>
  13. 銀行帳號: <input type="text" id="account_no"/><br/>
  14. 消費日期: <input type="text" id="order_date"/><br/>
  15. <script>
  16. $(document).ready(function () {
  17. $('#add_done').on('click', (function (e) {
  18. var file = document.querySelector('input[type="file"]').files[0];
  19. var reader = new FileReader();
  20. reader.readAsDataURL(file);
  21. reader.onload = function () {
  22. var formData = new FormData();
  23. formData.append("doc", reader.result);
  24. $.ajax({
  25. type: 'POST',
  26. url: '/api2021/setdoc/test',
  27. data: formData,
  28. cache: false,
  29. contentType: false,
  30. processData: false,
  31. success: function (data) {
  32. if (data.succ == true) {
  33. $("#order_no").val(data.data.order_no);
  34. $("#account_bank").val(data.data.account_bank);
  35. $("#account_no").val(data.data.account_no);
  36. $("#order_date").val(data.data.order_date);
  37. } else {
  38. alert(data.err);
  39. }
  40. },
  41. error: function (data) {
  42. }
  43. });
  44. };
  45. }));
  46. $('#clear').on('click', (function (e) {
  47. $("#order_no").val('');
  48. $("#account_bank").val('');
  49. $("#account_no").val('');
  50. $("#order_date").val('');
  51. }));
  52. });
  53. </script>
  54. </body>
  55. </html>