Нет описания

DR.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="../Script/Common/huayi.load.js"></script>
  6. <script src="../Script/Common/huayi.config.js"></script>
  7. <title>导入号码</title>
  8. <style>
  9. .btn-success {
  10. color: #fff;
  11. background-color: #00479D;
  12. border-color: #4cae4c;
  13. border-radius: 4px;
  14. cursor: pointer;
  15. }
  16. .btn-success.active,
  17. .btn-success:active,
  18. .btn-success:focus,
  19. .btn-success:hover {
  20. border-color: #4cae4c;
  21. background-color: #00479D;
  22. }
  23. .btn-success[disabled],
  24. .btn-success[disabled]:active,
  25. .btn-success[disabled]:focus,
  26. .btn-success[disabled]:hover {
  27. background-color: #00479D;
  28. }
  29. #importNum {
  30. width: 130px;
  31. margin: 60px auto 0 auto;
  32. }
  33. .progress {
  34. width: 80%;
  35. margin: 20px auto 0 auto;
  36. display: none;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div style="padding: 10px; margin-bottom: 20px;">
  42. <div class="alert alert-info" role="alert">
  43. <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  44. <span class="sr-only">tips:</span> 上传文件需要严格按照下载的EXCEL模板进行填写!上传后点击导入即可!
  45. </div>
  46. <div class="form-inline clearfix">
  47. <div class="form-group">
  48. <a href="excel/导入号码模板(1).xlsx" download="导入号码模板.xlsx" class="btn btn-success form-control" id="downloadExl" title="点击下载EXCEL模板" rel="nofollow">
  49. 下载EXCEL模板
  50. </a>
  51. </div>
  52. <div class="form-group">
  53. <input class="hidden" type="file" id="upFile" name="upFile" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,application/x-xls,application/x-xlsx" />
  54. <input class="form-control btn btn-success" title="点击上传Excel文件" type="button" value="上传Excel文件" id="upFileExcel" />
  55. <span class="excelName"></span>
  56. </div>
  57. </div>
  58. <div class="progress">
  59. <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  60. </div>
  61. </div>
  62. <div class="form-group text-center">
  63. <input type="button" id="importNum" class="form-control btn btn-success" value="导入" />
  64. </div>
  65. </div>
  66. <script>
  67. var wid = helper.request.queryString("Str");
  68. var percents = 0;//长传文件进度值
  69. $(document).ready(function() {
  70. //上传EXCEL文件
  71. $("#upFileExcel").click(function() {
  72. $("#upFile").trigger("click");
  73. });
  74. $("#upFile").change(function() {
  75. var Files = document.getElementById("upFile").files;
  76. $('.excelName').html(Files[0].name); //文件名称
  77. });
  78. $("#importNum").click(function() {
  79. //ajaxFileUpload();
  80. //upload();
  81. uploads();
  82. });
  83. });
  84. //上传Excel文件 模拟实时进度
  85. function uploads() {
  86. var txtName = $('.excelName').text();
  87. if(txtName == '') {
  88. layer.confirm('请先上传文件', {
  89. icon: 2,
  90. btn: ['确定']
  91. });
  92. return;
  93. }
  94. //一般情况下,excel后缀是".xls",在2007以及以后的版本中又增加了".xlsx"。excel的模板文件后缀名是".xlt",启动宏的工作簿后缀名是".xlsm"。
  95. if(txtName.indexOf('.xls') != -1 ||
  96. txtName.indexOf('.xlsx') != -1 ||
  97. txtName.indexOf('.xlt') != -1 ||
  98. txtName.indexOf('.xlsm') != -1
  99. ) {
  100. var formData = new FormData();
  101. var Files = document.getElementById("upFile").files;
  102. formData.append("upFile", Files[0]);
  103. formData.append("taskid", wid);
  104. formData.append("token", $.cookie("token"));
  105. $.ajax({
  106. url: huayi.config.callcenter_url + "AutomaticCall//TelInput",
  107. type: "POST",
  108. data: formData,
  109. contentType: false,
  110. processData: false,
  111. xhr: function() {
  112. var xhr = jQuery.ajaxSettings.xhr();
  113. xhr.upload.onload = function() {
  114. updateProgress(88);
  115. }
  116. xhr.upload.onprogress = function(ev) {
  117. updateProgress(70);
  118. }
  119. return xhr;
  120. },
  121. beforeSend: function(request) {
  122. $('.progress').show();
  123. $("#importNum").attr("disabled", true);
  124. $("#importNum").val('导入中...');
  125. updateProgress(50);
  126. },
  127. success: function(result) {
  128. updateProgress(100);
  129. var r = $.parseJSON(result);
  130. $("#importNum").attr("disabled", false);
  131. $("#importNum").val('导入');
  132. if(r.state.toLowerCase() == "success") {
  133. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  134. parent.layer.close(index); //再执行关闭
  135. parent.initPhoneTable(wid);
  136. parent.layer.alert(r.message, {
  137. icon: 1,
  138. btn: ['确定']
  139. });
  140. }
  141. },
  142. error: function(textStatus) {
  143. percents = 0;
  144. $('.progress').hide();
  145. layer.confirm('网络繁忙,请稍后再试...', {
  146. btn: ['确定'] //按钮
  147. });
  148. $("#importNum").attr("disabled", false);
  149. $("#importNum").val('导入');
  150. },
  151. complete: function(XMLHttpRequest, textStatus) {
  152. percents = 0;
  153. $('.progress').hide();
  154. if(textStatus == 'timeout') {
  155. var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
  156. xmlhttp.abort();
  157. layer.confirm('网络超时,请稍后再试...', {
  158. btn: ['确定'] //按钮
  159. });    
  160. }
  161. $("#importNum").attr("disabled", false);
  162. $("#importNum").val('导入');
  163. },
  164. });
  165. } else {
  166. layer.confirm('请上传EXCEL文件', {
  167. icon: 2,
  168. btn: ['确定']
  169. });
  170. return;
  171. }
  172. }
  173. //更新进度条
  174. function updateProgress(p) {
  175. while(percents < p) {
  176. percents++;
  177. $('.progress-bar').css('width', percents + '%');
  178. $('.progress-bar').text(percents + '%');
  179. }
  180. }
  181. //上传Excel文件 (XHR中表示的是文件上传进度;上传完成返回数据还需要时间;)
  182. function upload() {
  183. var txtName = $('.excelName').text();
  184. if(txtName == '') {
  185. layer.confirm('请先上传文件', {
  186. icon: 2,
  187. btn: ['确定']
  188. });
  189. return;
  190. }
  191. //一般情况下,excel后缀是".xls",在2007以及以后的版本中又增加了".xlsx"。excel的模板文件后缀名是".xlt",启动宏的工作簿后缀名是".xlsm"。
  192. if(txtName.indexOf('.xls') != -1 ||
  193. txtName.indexOf('.xlsx') != -1 ||
  194. txtName.indexOf('.xlt') != -1 ||
  195. txtName.indexOf('.xlsm') != -1
  196. ) {
  197. var formData = new FormData();
  198. var Files = document.getElementById("upFile").files;
  199. formData.append("upFile", Files[0]);
  200. formData.append("taskid", wid);
  201. formData.append("token", $.cookie("token"));
  202. $.ajax({
  203. url: huayi.config.callcenter_url + "AutomaticCall/TelInput",
  204. type: "POST",
  205. data: formData,
  206. /**
  207. *必须false才会自动加上正确的Content-Type
  208. */
  209. contentType: false,
  210. /**
  211. * 必须false才会避开jQuery对 formdata 的默认处理
  212. * XMLHttpRequest会对 formdata 进行正确的处理
  213. */
  214. processData: false,
  215. xhr: function() { //这是关键 获取原生的xhr对象 做以前做的所有事情
  216. var xhr = jQuery.ajaxSettings.xhr();
  217. xhr.upload.onload = function() {
  218. //alert('finish downloading')
  219. }
  220. xhr.upload.onprogress = function(ev) {
  221. //console.log(ev);
  222. //if(ev.lengthComputable) {
  223. var percent = 100 * ev.loaded / ev.total;
  224. //console.log(percent, ev);
  225. $('.progress-bar').css('width', percent + '%');
  226. $('.progress-bar').text(percent + '%');
  227. //}
  228. }
  229. return xhr;
  230. },
  231. beforeSend: function(request) {
  232. $('.progress').show();
  233. $("#importNum").attr("disabled", true);
  234. $("#importNum").val('导入中...');
  235. },
  236. success: function(result) {
  237. $('.progress').hide();
  238. var r = $.parseJSON(result);
  239. $("#importNum").attr("disabled", false);
  240. $("#importNum").val('导入');
  241. if(r.state.toLowerCase() == "success") {
  242. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  243. parent.layer.close(index); //再执行关闭
  244. parent.initPhoneTable(wid);
  245. parent.layer.alert(r.message, {
  246. icon: 1,
  247. btn: ['确定']
  248. });
  249. // parent.initPhoneTable()
  250. }
  251. },
  252. error: function(textStatus) {
  253. $('.progress-bar').css('width', '0%');
  254. $('.progress-bar').text('0%');
  255. layer.confirm('网络繁忙,请稍后再试...', {
  256. btn: ['确定'] //按钮
  257. });
  258. $("#importNum").attr("disabled", false);
  259. $("#importNum").val('导入');
  260. },
  261. complete: function(XMLHttpRequest, textStatus) {
  262. //$('.progress-bar').css('width', '0%');
  263. //$('.progress-bar').text('0%');
  264. if(textStatus == 'timeout') {
  265. var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
  266. xmlhttp.abort();
  267. layer.confirm('网络超时,请稍后再试...', {
  268. btn: ['确定'] //按钮
  269. });    
  270. }
  271. $("#importNum").attr("disabled", false);
  272. $("#importNum").val('导入');
  273. },
  274. });
  275. } else {
  276. layer.confirm('请上传EXCEL文件', {
  277. icon: 2,
  278. btn: ['确定']
  279. });
  280. return;
  281. }
  282. }
  283. /*function ajaxFileUpload() {
  284. var txtName = $('.excelName').text();
  285. if(txtName == '') {
  286. layer.confirm('请先上传文件', {
  287. icon: 2,
  288. btn: ['确定']
  289. });
  290. return;
  291. }
  292. //一般情况下,excel后缀是".xls",在2007以及以后的版本中又增加了".xlsx"。excel的模板文件后缀名是".xlt",启动宏的工作簿后缀名是".xlsm"。
  293. if(txtName.indexOf('.xls') != -1 ||
  294. txtName.indexOf('.xlsx') != -1 ||
  295. txtName.indexOf('.xlt') != -1 ||
  296. txtName.indexOf('.xlsm') != -1
  297. ) {
  298. $.ajaxFileUpload({
  299. url: huayi.config.callcenter_url + 'CallOutPlan/TelInput', //用于文件上传的服务器端请求地址
  300. secureuri: false, //是否需要安全协议,一般设置为false
  301. fileElementId: $("#upFile").attr("id"), //'upFile', //文件上传域的ID
  302. contentType: 'application/javascript; charset=utf-8',
  303. dataType: 'json', //返回值类型 一般设置为json
  304. data: {
  305. taskid: wid,
  306. token: $.cookie("token")
  307. },
  308. success: function(data, status, e) { //服务器成功响应处理函数
  309. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  310. parent.layer.close(index); //再执行关闭
  311. parent.Right(wid);
  312. parent.layer.msg("导入成功");
  313. },
  314. error: function(data, status, e) { //服务器响应失败处理函数
  315. //console.log(e);
  316. }
  317. })
  318. return false;
  319. } else {
  320. layer.confirm('请上传EXCEL文件', {
  321. icon: 2,
  322. btn: ['确定']
  323. });
  324. return;
  325. }
  326. }
  327. */
  328. </script>
  329. </body>
  330. </html>