本文主要讲前端内容，后端涉及较少，可以认为是使用Java。

首先是excel文件上传，这个较为简单，可以html5的数据接口FormData()进行操作。具体代码如下：

<!DOCTYPE html>

<html>

    <head>

    </head>

    <body>

        <input type="file" id="_file" value=""/><p for="file">或点此选择文件</p>    
　　　　　<button id = "file_button" >按钮</button>

    </body>

</html>

然后是对应的javascript

$("#button").click(function(){

  var files = $('#_file').prop('files');

  var data = new FormData();

  data.append("upload",files[0]); //因为是只选择一个文件，故而只取file[0]

  $.ajax({

    url: yourPath,

    type: 'POST',

    data: data,

    cache: false,

    dataType:'text',

    processData: false,

    contentType: false,

    success: function(result) {

                // Do something with the result

        alert("成功");

    },

    error : function(result){

        alert("失败"+result.toString());

    }

  });

});

后端接收到文件之后，将其存储成二进制数组，在数据库中，比如postgresql，使用blob数据类型，然后在java中使用byte数组映射就可以了。

那么怎么从后端存储的文件内容直接在页面上excel呢？这里需要用到sheetJs，官网：http://sheetjs.com/，可以直接取其demo来用，

demo下载地址放在github上了：https://github.com/SheetJS/SheetJS.github.io。

在这里是直接使用它的一些代码，主要说说思路。

下载后解压是SheetJS.github.io-master文件夹，在而显示生成excel的Js代码主要在SheetJS.github.io-master\assets\js\dropsheet.js中。其中发下其最后是通过调用该文件中以下代码

function handleDrop(e) {

        e.stopPropagation();

        e.preventDefault();

        if(pending) return opts.errors.pending();

        var files = e.dataTransfer.files;

        var i,f;

        for (i = 0, f = files[i]; i != files.length; ++i) {

            var reader = new FileReader();

            var name = f.name;

            reader.onload = function(e) {

                var data = e.target.result;

                var wb, arr;

                var readtype = {type: rABS ? 'binary' : 'base64' };

                if(!rABS) {

                    arr = fixdata(data);

                    data = btoa(arr);

                }

                function doit() {

                    try {

                        if(useworker) { sheetjsw(data, process_wb, readtype); return; }

                        wb = XLSX.read(data, readtype);

                        process_wb(wb);

                    } catch(e) { console.log(e); opts.errors.failed(e); }

                }

                if(e.target.result.length > 1e6) opts.errors.large(e.target.result.length, function(e) { if(e) doit(); });

                else { doit(); }

            };

            if(rABS) reader.readAsBinaryString(f);

            else reader.readAsArrayBuffer(f);

        }

    }

说明：SheetJs这个demo中，解析excel使用的是js-xlsx这个库，这个库对excel的操作很多，解析只是一个方面，具体可以上github上看。而根据解析在html上绘制excel表格的是canvas-datagrid.js这个表格控件。

可以看到它是通过FileReader的readAsBinaryString方法读取每个选中的文件，根据文件内容在html中绘制出excel表格，那么我们只要在这里自己从后端接收那个二进制数据，生成一个File对象，再跑同样这段代码就OK。

这个过程中碰到两个问题：

一个就是后端的byte数组传递到前端很不方便，而且我在用ajax传递的时候，二进制数组参数会变成string型。

另一个就是javascript中无法直接新建一个File对象。。

首先第一个问题，二进制数组不能传递，那么就只能传递字符串了，但是不能直接转字符串，那么有什么办法呢？再上面的代码看到，里面有一句

var readtype = {type: rABS ? 'binary' : 'base64' };

说明这个操作可以操作base64编码的字符串，那就是转成base64，这个需要引入apache的一个包，包名为commons-codec，再Maven中引用如下，

<!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->

<dependency>

    <groupId>commons-codec</groupId>

    <artifactId>commons-codec</artifactId>

    <version>1.10</version>

</dependency>

再调用其一个方法，

Base64.encodeBase64String(byteArray);   //将byteArray转为base64字符串

这样就可以传输到前端了。

再说第二个问题，通过百度发现，javascript有一种数据类型Blob，而File正是基于这种Blob的。

一个Blob对象就是一个包含有只读原始数据的类文件对象

但是Blob是可以初始化来生成的，

var blob = new Blob([base64Data], { type: "mime" })
然后就可以通过FileReader读取了，再接下来只需要按照demo的代码调用就可以了。。。
reader.readAsBinaryString(blob);
 
...

将excel文件内容存储到数据库，并可以实时在前端查看（不必生成文件）的更多相关文章

  1. js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  2. Java&mysql：过滤文件内容，将新文件内容存入mysql数据库

    在上一篇博文jdbc连接数据库中我已经简单介绍了如何连接到mysql数据库,今天要总结的是学长给我布置的一个小作业,把一个很大的已经用","分开了的一行一行的txt文件内容过滤掉注 ...

  3. Java基础面试操作题：读取该文件内容，并按照自然顺序排序后输出到 另一个文件中

    package com.swift; import java.io.FileInputStream; import java.io.FileNotFoundException; import java ...

  4. 使用gcc不同选项来编译查看中间生成文件

    gcc编译C程序的总体流程如下图 用到的命令如下: .c---> .i gcc -E hello.c .c--->.s gcc -S hello.c .c--->.o gcc -c ...

  5. Yii 读取CVS文件内容插入到数据库

    这个方法和上次写的读取txt文件的方法基本上差不多,直接贴代码,需要的直接拿走 function ImportExcel(){ $file = fopen('test.csv','r'); //输出文 ...

  6. Eclipse中java文件边的黄色数据库标志变成了蓝色小勾，导致文件修改后无法显示在Git staging窗口中，修改无法提交，怎么解决？

    出现这个问题的原因是误点击了右键点文件->Team->Advanced->Assume Unchanged, 导致结果是文件修改了无法显示在Git staging窗口中,自然无法提交 ...

  7. java读取大文件内容到Elasticsearch分析（手把手教你java处理超大csv文件）

    现在需要快算分析一个2g的csv文件: 基于掌握的知识,使用java按行读取文件,批量导入数据到es, 然后利用es强大的聚合能力分析数据,2个小时搞定! package com.example.de ...

  8. 【Oracle】10g查看trace生成文件位置及文件名称

    select  u_dump.value || '/' ||  db_name.value || '_ora_' ||  v$process.spid ||  nvl2(v$process.trace ...

  9. NodeJs之EXCEL文件导入导出MongoDB数据库数据

    NodeJs之EXCEL文件导入导出MongoDB数据库数据 一,介绍与需求 1.1,介绍 (1),node-xlsx : 基于Node.js解析excel文件数据及生成excel文件. (2),ex ...

随机推荐

  1. 用json方法来作深拷贝应该知道的一点东西！

    之前写js比较多的的时候也写过深拷贝,浅拷贝,继承啥的,还有自定义的监听事件.然而过了很久都忘了. 最近在项目上用的深拷贝都是 b = JSON.parse( JSON.stringify(a) ) ...

  2. datalist标签小结

    在Web设计中,经常会用到如输入框的自动下拉提示,这将大大方便用户的输入.在以前,如果要实现这样的功能,必须要求开发者使用一些Javascript的技巧或相关的框架进行ajax调用,需要一定的编程工作 ...

  3. Java与算法之(2) - 快速排序

    快速排序的基本思路是,每次选定数列中的一个基准数,将小于基准数的数字都放到基准数左边,大于基准数的数字都放到基准数右边.然后再分别对基准数左右的两个数列分别重复以上过程.仍以4 3 6 2 7 1 5 ...

  4. python模块学习：os模块

    一.os模块概述 Python os模块包含普遍的操作系统功能.例如文件的复制.创建.修改.删除文件及文件夹... 二.常用方法 1.os.listdir()   返回指定目录下的所有文件和目录名. ...

  5. metasploit魔鬼训练营 (安全漏洞生命周期)

    1,前期 渗透测试工程师在挖掘0day的出来的 2,前中期 在一个密封的团体里,互相交流,利用漏洞带来的价值和,金钱 3,中期 安全漏洞被披露!!黑客们快速掌握该漏洞 4,中后期 漏洞被制作成更为简单 ...

  6. Codeforces 777A Shell Game

    A. Shell Game time limit per test:0.5 seconds memory limit per test:256 megabytes input:standard inp ...

  7. BZOJ 2222: [Cqoi2006]猜数游戏【神奇的做法，傻逼题，猜结论】

    2222: [Cqoi2006]猜数游戏 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 604  Solved: 260[Submit][Status ...

  8. [bzoj3282]Tree (lct)

    昨天看了一天的lct..当然幸好最后看懂了(也许吧..) 论善良学长的重要性T_T,老司机带带我! 这题主要是删边的时候还要判断一下..蒟蒻一开始天真的以为存在的边才能删结果吃了一发wa... 事实是 ...

  9. POJ_1064 二分搜索

    /*POJ 1064 *题目大意:有N条绳子,他们的长度分别为Li,如果从他们中切割K条长度相同的绳子的话,这K条绳子每条最长能有多长?答案保留到小数点后2位 *算法分析:这个问题用二分搜索可以非常容 ...

  10. 微信小程序开发官方文档解读

    创建页面 在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下.微信小程序中的每一个页面的[路径+页面名]都需要写在 app ...