| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <script src="../Script/Common/huayi.load.js"></script>
- <script src="../Script/Common/huayi.config.js"></script>
- <!--<script src="../js/visit/ajaxfileupload.js"></script>-->
- <title>导入号码</title>
- <style>
- .btn-success {
- color: #fff;
- background-color: #1ab394;
- border-color: #4cae4c;
- border-radius: 4px;
- cursor: pointer;
- }
-
- .btn-success.active,
- .btn-success:active,
- .btn-success:focus,
- .btn-success:hover {
- border-color: #4cae4c;
- background-color: #1ab394;
- }
-
- .btn-success[disabled],
- .btn-success[disabled]:active,
- .btn-success[disabled]:focus,
- .btn-success[disabled]:hover {
- background-color: #1ab394;
- }
-
- #importNum {
- width: 130px;
- margin: 60px auto 0 auto;
- }
-
- .progress {
- width: 80%;
- margin: 20px auto 0 auto;
- display: none;
- }
- </style>
- </head>
- <body>
- <div style="padding: 10px; margin-bottom: 20px;">
- <div class="alert alert-info" role="alert">
- <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
- <span class="sr-only">tips:</span> 上传文件需要严格按照下载的EXCEL模板进行填写!上传后点击导入即可!
- </div>
- <div class="form-inline clearfix">
- <div class="form-group">
- <a href="drmb/导入模板.xlsx" download="导入模板.xlsx" class="btn btn-success form-control" id="downloadExl" title="点击下载EXCEL模板" rel="nofollow">
- 下载EXCEL模板
- </a>
- </div>
- <div class="form-group">
- <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" />
- <input class="form-control btn btn-success" title="点击上传Excel文件" type="button" value="上传Excel文件" id="upFileExcel" />
- <span class="excelName"></span>
- </div>
- </div>
- <div class="progress">
- <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
- </div>
- </div>
- <div class="form-group text-center">
- <input type="button" id="importNum" class="form-control btn btn-success" value="导入" />
- </div>
- </div>
- <script>
- var wid = helper.request.queryString("Str");
- var percents = 0;//长传文件进度值
- $(document).ready(function() {
- //上传EXCEL文件
- $("#upFileExcel").click(function() {
- $("#upFile").trigger("click");
- });
- $("#upFile").change(function() {
- var Files = document.getElementById("upFile").files;
- $('.excelName').html(Files[0].name); //文件名称
- });
- $("#importNum").click(function() {
- //ajaxFileUpload();
- //upload();
- uploads();
- });
- });
- //上传Excel文件 模拟实时进度
- function uploads() {
- var txtName = $('.excelName').text();
- if(txtName == '') {
- layer.confirm('请先上传文件', {
- icon: 2,
- btn: ['确定']
- });
- return;
- }
- //一般情况下,excel后缀是".xls",在2007以及以后的版本中又增加了".xlsx"。excel的模板文件后缀名是".xlt",启动宏的工作簿后缀名是".xlsm"。
- if(txtName.indexOf('.xls') != -1 ||
- txtName.indexOf('.xlsx') != -1 ||
- txtName.indexOf('.xlt') != -1 ||
- txtName.indexOf('.xlsm') != -1
- ) {
- var formData = new FormData();
- var Files = document.getElementById("upFile").files;
- formData.append("upFile", Files[0]);
- formData.append("taskid", wid);
- formData.append("token", $.cookie("token"));
- $.ajax({
- url: huayi.config.callcenter_url + "CallOutPlan/TelInput",
- type: "POST",
- data: formData,
- /**
- *必须false才会自动加上正确的Content-Type
- */
- contentType: false,
- /**
- * 必须false才会避开jQuery对 formdata 的默认处理
- * XMLHttpRequest会对 formdata 进行正确的处理
- */
- processData: false,
- xhr: function() {
- var xhr = jQuery.ajaxSettings.xhr();
- xhr.upload.onload = function() {
- updateProgress(88);
- }
- xhr.upload.onprogress = function(ev) {
- updateProgress(70);
- }
- return xhr;
- },
- beforeSend: function(request) {
- $('.progress').show();
- $("#importNum").attr("disabled", true);
- $("#importNum").val('导入中...');
- updateProgress(50);
- },
- success: function(result) {
- updateProgress(100);
- var r = $.parseJSON(result);
- $("#importNum").attr("disabled", false);
- $("#importNum").val('导入');
- if(r.state.toLowerCase() == "success") {
- var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
- parent.layer.close(index); //再执行关闭
- parent.Right(wid);
- parent.layer.alert(r.message, {
- icon: 1,
- btn: ['确定']
- });
- }
- },
- error: function(textStatus) {
- percents = 0;
- $('.progress').hide();
- layer.confirm('网络繁忙,请稍后再试...', {
- btn: ['确定'] //按钮
- });
- $("#importNum").attr("disabled", false);
- $("#importNum").val('导入');
- },
- complete: function(XMLHttpRequest, textStatus) {
- percents = 0;
- $('.progress').hide();
- if(textStatus == 'timeout') {
- var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
- xmlhttp.abort();
- layer.confirm('网络超时,请稍后再试...', {
- btn: ['确定'] //按钮
- });
- }
- $("#importNum").attr("disabled", false);
- $("#importNum").val('导入');
- },
- });
- } else {
- layer.confirm('请上传EXCEL文件', {
- icon: 2,
- btn: ['确定']
- });
- return;
- }
- }
- //更新进度条
- function updateProgress(p) {
- while(percents < p) {
- percents++;
- $('.progress-bar').css('width', percents + '%');
- $('.progress-bar').text(percents + '%');
- }
- }
- //上传Excel文件 (XHR中表示的是文件上传进度;上传完成返回数据还需要时间;)
- function upload() {
- var txtName = $('.excelName').text();
- if(txtName == '') {
- layer.confirm('请先上传文件', {
- icon: 2,
- btn: ['确定']
- });
- return;
- }
- //一般情况下,excel后缀是".xls",在2007以及以后的版本中又增加了".xlsx"。excel的模板文件后缀名是".xlt",启动宏的工作簿后缀名是".xlsm"。
- if(txtName.indexOf('.xls') != -1 ||
- txtName.indexOf('.xlsx') != -1 ||
- txtName.indexOf('.xlt') != -1 ||
- txtName.indexOf('.xlsm') != -1
- ) {
- var formData = new FormData();
- var Files = document.getElementById("upFile").files;
- formData.append("upFile", Files[0]);
- formData.append("taskid", wid);
- formData.append("token", $.cookie("token"));
- $.ajax({
- url: huayi.config.callcenter_url + "CallOutPlan/TelInput",
- type: "POST",
- data: formData,
- /**
- *必须false才会自动加上正确的Content-Type
- */
- contentType: false,
- /**
- * 必须false才会避开jQuery对 formdata 的默认处理
- * XMLHttpRequest会对 formdata 进行正确的处理
- */
- processData: false,
- xhr: function() { //这是关键 获取原生的xhr对象 做以前做的所有事情
- var xhr = jQuery.ajaxSettings.xhr();
- xhr.upload.onload = function() {
- //alert('finish downloading')
- }
- xhr.upload.onprogress = function(ev) {
- //console.log(ev);
- //if(ev.lengthComputable) {
- var percent = 100 * ev.loaded / ev.total;
- //console.log(percent, ev);
- $('.progress-bar').css('width', percent + '%');
- $('.progress-bar').text(percent + '%');
- //}
- }
- return xhr;
- },
- beforeSend: function(request) {
- $('.progress').show();
- $("#importNum").attr("disabled", true);
- $("#importNum").val('导入中...');
- },
- success: function(result) {
- $('.progress').hide();
- var r = $.parseJSON(result);
- $("#importNum").attr("disabled", false);
- $("#importNum").val('导入');
- if(r.state.toLowerCase() == "success") {
- var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
- parent.layer.close(index); //再执行关闭
- parent.Right(wid);
- parent.layer.alert(r.message, {
- icon: 1,
- btn: ['确定']
- });
- }
- },
- error: function(textStatus) {
- $('.progress-bar').css('width', '0%');
- $('.progress-bar').text('0%');
- layer.confirm('网络繁忙,请稍后再试...', {
- btn: ['确定'] //按钮
- });
- $("#importNum").attr("disabled", false);
- $("#importNum").val('导入');
- },
- complete: function(XMLHttpRequest, textStatus) {
- //$('.progress-bar').css('width', '0%');
- //$('.progress-bar').text('0%');
- if(textStatus == 'timeout') {
- var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
- xmlhttp.abort();
- layer.confirm('网络超时,请稍后再试...', {
- btn: ['确定'] //按钮
- });
- }
- $("#importNum").attr("disabled", false);
- $("#importNum").val('导入');
- },
- });
- } else {
- layer.confirm('请上传EXCEL文件', {
- icon: 2,
- btn: ['确定']
- });
- return;
- }
- }
- /*function ajaxFileUpload() {
- var txtName = $('.excelName').text();
- if(txtName == '') {
- layer.confirm('请先上传文件', {
- icon: 2,
- btn: ['确定']
- });
- return;
- }
- //一般情况下,excel后缀是".xls",在2007以及以后的版本中又增加了".xlsx"。excel的模板文件后缀名是".xlt",启动宏的工作簿后缀名是".xlsm"。
- if(txtName.indexOf('.xls') != -1 ||
- txtName.indexOf('.xlsx') != -1 ||
- txtName.indexOf('.xlt') != -1 ||
- txtName.indexOf('.xlsm') != -1
- ) {
- $.ajaxFileUpload({
- url: huayi.config.callcenter_url + 'CallOutPlan/TelInput', //用于文件上传的服务器端请求地址
- secureuri: false, //是否需要安全协议,一般设置为false
- fileElementId: $("#upFile").attr("id"), //'upFile', //文件上传域的ID
- contentType: 'application/javascript; charset=utf-8',
- dataType: 'json', //返回值类型 一般设置为json
- data: {
- taskid: wid,
- token: $.cookie("token")
- },
- success: function(data, status, e) { //服务器成功响应处理函数
- var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
- parent.layer.close(index); //再执行关闭
- parent.Right(wid);
- parent.layer.msg("导入成功");
- },
- error: function(data, status, e) { //服务器响应失败处理函数
- //console.log(e);
- }
- })
- return false;
- } else {
- layer.confirm('请上传EXCEL文件', {
- icon: 2,
- btn: ['确定']
- });
- return;
- }
- }
- */
- </script>
- </body>
- </html>
|