PingAnYeXianSZCG_Web 前端代码

CS.html 4.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!doctype html>
  2. <html lang="en" class="feedback">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title>信息上传</title>
  7. <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
  8. <link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
  9. <link rel="stylesheet" type="text/css" href="../css/Common.css" />
  10. <style>
  11. </style>
  12. </head>
  13. <body>
  14. <div class="mui-content">
  15. <div class="row mui-input-row">
  16. <textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
  17. </div>
  18. <div id='image-list' class="row image-list"></div>
  19. <form class="mui-input-group" method="post" enctype="multipart/form-data" id="uploadForm">
  20. <div class="mui-input-row">
  21. <label>联系人:</label>
  22. <input type="text" class="mui-input-clear" id="Username" placeholder="">
  23. </div>
  24. <div class="mui-input-row">
  25. <label>联系电话:</label>
  26. <input type="text" class="mui-input-clear" id="Phone" placeholder="">
  27. </div>
  28. </form>
  29. <img id="my_img_id" class="my_img_class" src="../images/iconfont-tianjia.png" />
  30. <div class="mui-button-row" id="Btns-box">
  31. <button type="button" id="submit" class="mui-btn mui-btn-primary" onclick="return false;">提交</button>&nbsp;&nbsp;
  32. </div>
  33. </div>
  34. <script src="../js/zepto.js"></script>
  35. <script src="../Script/Common/huayi.config.js"></script>
  36. <script src="../Script/Common/huayi.http.js"></script>
  37. <script src="../js/mui.min.js"></script>
  38. <script src="../js/feedback-page.js" type="text/javascript" charset="utf-8"></script>
  39. <script type="text/javascript">
  40. mui.init();
  41. var openid = helper.cookies.get("openid");
  42. // $("#submit").on('tap', function() {
  43. // if(!$("#question").val()) {
  44. // mui.toast("工单内容不能为空");
  45. // } else {
  46. // $.ajax({
  47. // type: "post",
  48. // url: huayi.config.callcenter_url + 'WxLogin/AddWorkOrder',
  49. // async: true,
  50. // dataType: 'json',
  51. // data: {
  52. // cusname: $("#Username").val(), //联系人
  53. // cusphone: $("#Phone").val(), //联系电话
  54. // content: $("#question").val(), //信息内容
  55. // openid: openid //微信openid
  56. // },
  57. // success: function(data) {
  58. // if(data.state == "success") {
  59. // mui.toast(data.message);
  60. // location.href = "WorkList.html";
  61. // } else {
  62. // mui.alert(data.message);
  63. // }
  64. // }
  65. // });
  66. // }
  67. //
  68. // })
  69. console.log(openid);
  70. // $("#submit").on("tap",function(){
  71. // var formData = new FormData($("#uploadForm")[0]);
  72. // console.log(formData)
  73. // })
  74. var img_my = document.getElementById('my_img_id');
  75. img_my.addEventListener('tap', function() {
  76. //打开相册
  77. plus.gallery.pick(
  78. function(path) {
  79. img_my.src = path; //设置img的路径
  80. //把图片base64编码 注意:这里必须在onload事件里执行!这给我坑的不轻
  81. img_my.onload = function() {
  82. var data = getBase64Image(img_my); //base64编码
  83. var newImgbase = data.split(",")[1]; //通过逗号分割到新的编码
  84. imgArray.push(newImgbase); //放到imgArray数组里面
  85. img_my.off('load'); //关闭加载
  86. }
  87. },
  88. function(e) {
  89. mui.toast('取消选择');
  90. });
  91. });
  92. //base64编码
  93. function getBase64Image(img) {
  94. var canvas = document.createElement("canvas"); //创建canvas DOM元素,并设置其宽高和图片一样
  95. canvas.width = img.width;
  96. canvas.height = img.height;
  97. var ctx = canvas.getContext("2d");
  98. ctx.drawImage(img, 0, 0, img.width, img.height); //使用画布画图
  99. var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); //动态截取图片的格式
  100. var dataURL = canvas.toDataURL("image/" + ext); //返回的是一串Base64编码的URL并指定格式
  101. return dataURL;
  102. }
  103. function uploadimg() {
  104. //这里就可以把添加过图片的imgArray通过JSON解析成字符串,然后上传给服务器
  105. var imgJson = JSON.stringify(imgArray);
  106. mui.ajax("http://www.baidu.com/upload.html", {
  107. data: {
  108. pic: imgJson,
  109. },
  110. type: 'post',
  111. timeout: 10000,
  112. dataType: 'json',
  113. success: function(data) {
  114. if(data.error == 0) {
  115. mui.toast('上传成功');
  116. } else {
  117. mui.toast('上传失败:' + data.data);
  118. }
  119. },
  120. error: function(xhr, type, errorThrown) {
  121. mui.toast('错误');
  122. }
  123. });
  124. }
  125. </script>
  126. </body>
  127. </html>