Keine Beschreibung

Dr.html 11KB

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