精华内容
下载资源
问答
  • jquery读取导入excel文件
    千次阅读
    2020-10-27 18:37:38

    1.引入js
    xlsx.full.min.js
    链接: https://pan.baidu.com/s/1ZZIIf_i6dy8wIwumMQKFHA
    提取码: bmv7
    2.html代码

    <button class="btn btn-primary btn-blue" onclick="selectFile();">上 传</button>
    <input type="file" id="file"  style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/>
    

    3.js代码

    /**
    	 * 导入
    	 */
    function selectFile(){
    	//触发 文件选择的click事件
        	$("#file").trigger("click");
        }
    $('#file').change(function(e) {
    	$("#myDiv").show();
             var files = e.target.files;
             var fileReader = new FileReader();
             fileReader.onload = function(ev) {
                 try {
                     var data = ev.target.result,
                         workbook = XLSX.read(data, {
                             type: 'binary'
                         }), // 以二进制流方式读取得到整份excel表格对象
                         persons = []; // 存储获取到的数据
                 } catch (e) {
                     console.log('文件类型不正确');
                     return;
                 }
    
                 // 表格的表格范围,可用于判断表头是否数量是否正确
                 var fromTo = '';
                 // 遍历每张表读取
                 for (var sheet in workbook.Sheets) {
                     if (workbook.Sheets.hasOwnProperty(sheet)) {
                         fromTo = workbook.Sheets[sheet]['!ref'];
                         persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                          break; // 如果只取第一张表,就取消注释这行
                     }
                 } 
                 var str="";
                 for(var i=0;i<persons.length;i++){
                	 if(i==persons.length-1){
                		 str+=JSON.stringify(persons[i]);
                	 }else{
                		 str+=JSON.stringify(persons[i])+"*"
                	 }
                 }
                 	$.ajax({
    					url:"${appPath}/eco/using/fusi0010_importData.st",
    					data:{"persons":str},
    					dataType:"json",
    					type:"post",
    					success:function(data){
    						var 错误数据集合=data.errorDataList;
    						var 错误条数=错误数据集合.length;
    						var 成功条数=data.successData;
    						var 总条数=data.totalData;
    						var 重复条数=data.duplicateData;
    						var str='';
    						str+='<tr  style="height:30px;line-height:30px; border-bottom-color: #fff;" >'
    							+'<td colspan="4" style="border-bottom-color: #fff !important;border-top-color: #fff !important;" class="td">数据上传情况:</td>'
    							+'</tr>'
    							+'<tr style="height:30px;line-height:30px;">'
    							+'<td colspan="4" class="td">'
    							+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
    							+'共导入 <span class="span">'+总条数+'</span> 条数据,上传成功 <span class="span">'+成功条数+'</span> 条, <span class="span">'+重复条数+'</span> 条重复数据, <span class="span">'+错误条数+'</span> 条导入错误数据,以下展示错误数据详情:'
    							+'</td>'
    							+'</tr>';
    							if(错误条数==0){
    							 str+='<tr style="font-weight:bold;height:30px;"><td style="width:20%;text-align: center;" class="td">序号</td><td style="width:20%;text-align: center;" class="td">汇总月份</td><td style="width:20%;text-align: center;" class="td">企业名称</td><td style="width:20%;text-align: center;" class="td">导入错误描述</td></tr>'
    								 +'<tr style="height:30px;line-height:30px;text-align: center; color: red;"><td colspan="4" class="td">无错误数据!</td></tr>'
    							}
    							if(错误数据集合.length>0){
    								str+='<tr style="font-weight:bold;height:30px;"><td style="width:20%;text-align: center;" class="td">序号</td><td style="width:20%;text-align: center;" class="td">汇总月份</td><td style="width:20%;text-align: center;" class="td">企业名称</td><td style="width:20%;text-align: center;" class="td">导入错误描述</td></tr>';
    								for(var i=0;i<错误数据集合.length;i++){
    									str+='<tr style="height:30px;"><td style="width:20%;text-align: center;" class="td">'+错误数据集合[i].序号+'</td><td style="width:20%;text-align: center;" class="td">'+错误数据集合[i].汇总月份+'</td><td style="width:20%;text-align: center;" class="td">'+错误数据集合[i].企业名称+'</td><td style="width:20%;text-align: center;" class="td">'+错误数据集合[i].导入错误描述+'</td></tr>';
    								}
    							}
    							$("#mytbody").html(str)
    							$("#myDiv").hide();
    					}
    				});
                 
             };   
             // 以二进制方式打开文件
             fileReader.readAsBinaryString(files[0]);
            //获取文件名称展示在页面上       
            var fliePath=$("#file").val();
       		var arr=fliePath.lastIndexOf("\\");
        	fliePath=fliePath.substring(arr+1,fliePath.length);
       		$("#fileName").text(fliePath);
           
         });
    
    更多相关内容
  • jQuery文件导入

    千次阅读 2019-09-26 10:52:10
    其中src属性中填写的是jQuery文件的位置,可以写相对位置,绝对位置或网络位置。 例如: 相对位置:在你的项目目录的下面的位置,则格式为 : XXX/XXX/jquery.js 例如你的目录是: 在你的htm...

    1.jQuery的导入方式:

    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    

    其中src属性中填写的是jQuery文件的位置,可以写相对位置,绝对位置或网络位置。

    例如: 相对位置:在你的项目目录的下面的位置,则格式为 : XXX/XXX/jquery.js

    例如你的目录是: 在你的html文件同级的JS文件下的jquery.js 那么你的src就可以写成 JS/jquery.js

    绝对位置:从你的根目录(即C盘或D盘等等的盘符开始),格式为: C:\xxx\xxx\jquery.js

    网络路径:格式为: https://xxx.xxx.xxx/xxx/jquery.js

    2.快速导入

    1.本地导入
    选中要导的文件拖拽在要导的项目里,这样无需担心路径问题,它会自动识别。
    在这里插入图片描述
    2.官网jquery压缩版引用地址:
    官网地址:http://code.jquery.com/

    <!--3.4.1版本-->
    <script src="http://code.jquery.com/jquery-3.4.1.js"></script>
    <!--2.2.4版本-->
    <script src="http://code.jquery.com/jquery-2.2.4.js"></script>
    

    详细可参考:https://www.cnblogs.com/wangshuazi/p/9510516.html

    3.测试

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <!--导入下载好的包 -->
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>-->
    </head>
    <body>
    <script>
        // 测试一下是否导入jquery成功
        $(  // jQuery调用匿名函数
            function(){  //匿名函数(功能:弹出123对话框)
                alert(123);    //弹出123对话框(弹出则代表导入成功)
            }
        )
    </script>
    </body>
    </html>
    
    

    测试结果:
    在这里插入图片描述
    成功弹出“123”,导入成功。

    展开全文
  • JQuery.js(导入文件)

    2012-01-29 16:25:00
    Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理...
  • 1、在最近做项目时,在html页面中,没有导入jquery文件时,可以正常保存,而导入jquery文件后,则不能不存了 经过调试后,发现导入jquery文件和现有的extjs文件冲突了(原因是$符号的冲突) jQuery与ExtJS之间发生...
  • 如何导入jQuery

    万次阅读 2018-10-09 22:06:35
    jquery是一个用来代替JavaScript来快捷书写前端脚本语言的库,jquery...jquery导入方式有两种,一种是本地导入,一种是从超链接导入。 方式一:本地导入 我们可以百度搜索jquery,可以搜到jquery的官方网站: ht...

    jquery是一个用来代替JavaScript来快捷书写前端脚本语言的库,jquery可以大大的简化复杂的js代码,使开发人员专注于实现页面的效果。

    相信你在阅读本文前也对jquery有过了解,废话不多说,我们这就来导入jquery。

    导入方式

    jquery的导入方式有两种,一种是本地导入,一种是从超链接导入。

    方式一:本地导入

    我们可以百度搜索jquery,可以搜到jquery的官方网站:

    https://jquery.com/

    从这里即可下载jquery的最新版本,点击下载图标,会跳转到下载详情页面:
    在这里插入图片描述
    这里的前两个链接是两个版本的jquery下载,一个是压缩版,一个是未压缩版,两个版本在功能上并没有区别,只不过压缩版为了在发布项目的时候jquery占用的空间更小,对压缩版的jquery进行了删减多余的空格和换行操作,以此来达到精简的目的,我们作为开发者,还未到发布项目的环节,因此选择第二个未压缩版(uncompressed)就好。

    点进链接,可以看到jquery的源码,我们直接ctrl+a,选中所有,新建一个txt文件,将源码拷贝到其中,然后修改后缀名为.js即可。

    接着,我们在要使用jquery的页面引入这个.js文件,代码如下:

    <script src="你的.js文件路径"></script>
    <script>
    	//在此书写你的jquery代码
    </script>
    
    注意

    注意!一定要先写引入的script再写自己的jquery代码,因为页面的加载顺序是从上到下加载,浏览器会先加载你的jquery代码再加载jquery库,造成你的jquery代码会被认为是错误书写格式,无法实现效果。

    方式二:导入在线jquery

    我们可以通过在script的src属性中写一个网址来导入在线的jquery代码,有人可能要问了,这样做不是会在网页加载的时候有一个下载jquery的时间吗?会不会下载很长时间,导致你的jquery代码一直不能被加载,影响用户体验?

    事实上,现在应用jquery的网站非常非常多,浏览器会在加载之前使用jquery的网站时就预先下载过jquery,因此到了我们这里就不用再次下载了,就算我们的jquery版本是一个新的没被浏览器加载过的版本,jquery的代码下载也会进行的很快,不过,如果你还是担心影响加载速度,本地导入jquery文件确实是最好的办法。

    导入在线jquery:
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    	//在此书写你的jquery代码
    </script>
    
    展开全文
  • 主要介绍了使用jquery动态加载js文件的方法,需要的朋友可以参考下
  • 使用jQuery导入】Excel文件

    千次阅读 2020-02-18 16:59:47
    1,使用input的type属性为file来上传导入文件 **// 导入 $(’.file_stu_sales’).change(function() { var loading = null; var formData = new FormData(); formData.append(‘file’, $(this)[0].files[0]); $....

    在这里插入图片描述
    1,使用input的type属性为file来上传导入文件

    在这里插入图片描述

     **// 导入
    

    $(’.file_stu_sales’).change(function() {
    var loading = null;
    var formData = new FormData();
    formData.append(‘file’, $(this)[0].files[0]);
    $.ajax({
    url: config.base_server + ‘接口’,
    type: ‘post’,
    async: false,
    data: formData,
    // 告诉jQuery不要去处理发送的数据
    processData: false,
    contentType: false,
    headers: {
    Authorization: ‘bearer ’ + config.getToken().access_token
    },
    beforeSend: function() {
    loading = layer.msg(‘导入中’);
    },
    success: function(res) {
    layer.close(loading);
    if (res.code === ‘200’) {
    layer.msg(‘导入成功’);
    $(’.file_stu_sales’).val(’’);
    setTimeout(() => {
    getSalesData();
    }, 1000);
    } else {
    layer.msg(res.message);
    $(’.file_stu_sales’).val(’’);
    }
    }
    });
    });**

    展开全文
  • 使用ajax,需要导入jquery 进入JQuery官网,选择下载,选中 要下载的内容,另存为 1、导入本地下载好的jquery <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script&...
  • 导入jQuery:在线导入

    2021-09-06 20:25:48
    在线导入jQuery 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对...
  • jquery导入Excel文件

    千次阅读 2017-11-16 11:44:36
    用到的插件xlsx.full.min.js 具体代码如下  /*  FileReader共有4种读取方法:  1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。 ... 2.readAsBinaryString... 3.readAsDataURL(file):将文件读取为Data
  • //自定义导入组件 $.fn.customImport = function(methodOroptions,value){ if(typeof methodOroptions == "string"){//存在方法时,调用方法 return $.fn.customImport.methods[methodOroptions](this, value); } ...
  • 主要介绍了jQuery使用$.get()方法从服务器文件载入数据,较为简单的分析了jQuery中get方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • jQuery文件树形结构菜单插件是一款利用数组导入文件树形菜单样式效果。
  • jQuery文件

    2018-04-13 08:48:07
    jQuery文件导入eclipse中,jQuery是一个快速、简洁的JavaScript框架
  • 大家好,今天我们来分享,jQuery的基本认识 jQuery 是一个 JavaScript 库,它的里面存在大量的JavaScript函数 jQuery 极大地简化了 JavaScript 编程 jQuery 的获取: https://jquery.com/ //这是它的官网 ...
  • 今天写的时候出现了一...解决办法:把jquery文件导入在第一个,保证在自己的js文件之前。 完美解决 还有同学问到怎么验证自己的jquery文件是否导入成功 打开浏览器控制台输入$ 正确提示 返回f 错误提示:提示调用api
  • proTree是一款jQuery文件树形菜单插件,利用数组导入文件树形结构菜单样式效果。
  • 从JS到 jQuery: jQueryjQueryUI、jQuerymobile 客户端JS的功能: 对浏览事件做出响应 在数据被提交到服务器之前验证数据 检测访客的浏览信息 控制cookie信息 其实还有服务器端JS 为什么要使用jQuery? 最...
  • jQuery 导入 上传文件

    2020-06-16 18:30:51
    需求:需要大批量导入数据,因此需要上传文件功能 样式处理: .upfile { position: relative; }
  • 我把jquery.js文件放在webapp下面plugins文件夹中如下图 ![图片说明](https://img-ask.csdn.net/upload/201710/21/1508580547_215131.png) 在jsp中引入方式看下图 ![图片说明]...
  • jQuery使用导入404问题

    2021-07-28 00:10:12
    1.看你的script标签是否自闭和了,如果自闭和则该标签失效 <script src="${pageContext.request.contextPath}...2.看out输出目录是否有jQuery文件 如果没有,就是使用maven的clear删除打包,然后重启服务器即可 ...
  • 使用Eclipse 3.7时,工程中加入jquery.xx.js文件,发现该文件出现错误提示(红×),但使用Eclipse 3.7以前的版本就不会出现这种提示。是因为Eclipse 3.7在.project配置文件中,加入了JS验证框架org.eclipse.wst....
  • 搭建flask导入jQuery文件在pycharm设置中添加配置: 打开设置>Languages&Frameworks>Libraries>JavaScript >add
  • 如果是页面加载时找不到jQuery,原因可以定向到未引入jQuery或引入的顺序错误,被拦截是因为配置SpringMVC的前端控制器(前端控制器又叫核心控制器或中央控制器)时servlet映射范围包括了jQuery的所在文件夹...
  • 问题描述:当一个js或jQuery文件引入页面时,路径是正确的但是无法生效——在浏览器运行这个页面时没有执行jQuery的代码。 解决办法一:可能是浏览器中缓存了你历史的一些纪录,你需要重新刷新浏览器的缓存。 步骤:...
  • 在工程中导入jquery-1.7.1之后一直有一个红叉叉,虽然不会影响程序功能,但是看着非常不舒服,下面有个不错的解决方法,大家可以尝试下
  • jQuery导入json数据

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,042
精华内容 20,416
关键字:

jquery文件导入

友情链接: KEPWARE C# DEMO.rar