商丘12345 前端

feedback-page.js 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. (function(mui, window, document, undefined) {
  2. mui.init();
  3. var get = function(id) {
  4. return document.getElementById(id);
  5. };
  6. var qsa = function(sel) {
  7. return [].slice.call(document.querySelectorAll(sel));
  8. };
  9. var ui = {
  10. question: get('question'),
  11. contact: get('contact'),
  12. imageList: get('image-list'),
  13. submit: get('submit')
  14. };
  15. ui.clearForm = function() {
  16. ui.question.value = '';
  17. ui.contact.value = '';
  18. ui.imageList.innerHTML = '';
  19. ui.newPlaceholder();
  20. };
  21. ui.getFileInputArray = function() {
  22. return [].slice.call(ui.imageList.querySelectorAll('input[type="file"]'));
  23. };
  24. ui.getFileInputIdArray = function() {
  25. var fileInputArray = ui.getFileInputArray();
  26. var idArray = [];
  27. fileInputArray.forEach(function(fileInput) {
  28. if(fileInput.value != '') {
  29. idArray.push(fileInput.getAttribute('id'));
  30. }
  31. });
  32. return idArray;
  33. };
  34. var imageIndexIdNum = 0;
  35. ui.newPlaceholder = function() {
  36. var fileInputArray = ui.getFileInputArray();
  37. if(fileInputArray &&
  38. fileInputArray.length > 0 &&
  39. fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
  40. return;
  41. }
  42. imageIndexIdNum++;
  43. var placeholder = document.createElement('div');
  44. placeholder.setAttribute('class', 'image-item space');
  45. var closeButton = document.createElement('div');
  46. closeButton.setAttribute('class', 'image-close');
  47. closeButton.innerHTML = 'X';
  48. closeButton.addEventListener('click', function(event) {
  49. event.stopPropagation();
  50. event.cancelBubble = true;
  51. setTimeout(function() {
  52. ui.imageList.removeChild(placeholder);
  53. }, 0);
  54. return false;
  55. }, false);
  56. var fileInput = document.createElement('input');
  57. fileInput.setAttribute('type', 'file');
  58. fileInput.setAttribute('class', 'image-box ');
  59. fileInput.setAttribute('accept', 'image/*');
  60. fileInput.setAttribute('id', 'image-' + imageIndexIdNum);
  61. fileInput.addEventListener('change', function(event) {
  62. var file = fileInput.files[0];
  63. var lengh = document.getElementsByClassName("image-item").length;
  64. if(lengh <6) {
  65. if(file) {
  66. var filename = $("#image-" + imageIndexIdNum).val();
  67. fileName = filename.split("\\")[2];
  68. // alert(fileName);
  69. var reader = new FileReader();
  70. reader.onload = function() {
  71. //处理 android 4.1 兼容问题
  72. var base64 = reader.result.split(',')[1];
  73. var dataUrl = 'data:image/png;base64,' + base64;
  74. var usercode = localStorage.getItem("user"); //获取本地存储
  75. //image-box
  76. //
  77. placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
  78. $.ajax({
  79. type: "post",
  80. // http://192.168.4.18:4010/ 测试
  81. // http://117.158.196.116:4010/ 外网
  82. // http://12345.shangqiu.gov.cn:8819/ 正式服务器
  83. // http://121.196.219.217:8002/ 阿里云服务器
  84. url: huayi.config.callcenter_url + 'Web/Upload64',
  85. async: true,
  86. dataType: 'json',
  87. data: {
  88. dataurl: dataUrl,
  89. usercode: usercode,
  90. filename:fileName,
  91. },
  92. success: function(data) {
  93. if(data.state == "success") {
  94. fileInput.setAttribute('indexs', data.data.F_FileId);
  95. mui.toast('上传成功');
  96. } else {
  97. mui.alert(data.message);
  98. }
  99. }
  100. });
  101. }
  102. reader.readAsDataURL(file);
  103. placeholder.classList.remove('space');
  104. ui.newPlaceholder();
  105. }
  106. }else{
  107. mui.toast('最多上传五张');
  108. }
  109. }, false);
  110. placeholder.appendChild(closeButton);
  111. placeholder.appendChild(fileInput);
  112. ui.imageList.appendChild(placeholder);
  113. };
  114. ui.newPlaceholder();
  115. })(mui, window, document, undefined);