SpreadJS实现文件上传按钮的功能

收藏

我们都知道，html中提供的input标签可以利用来实现文件上传单文件上传

<input id="file" type="file" />

复制代码

多文件上传

<input id="file" type="file" multiple="multiple" />

复制代码

但是在SpreadJS中如何实现这样的功能呢，了解SpreadJS的朋友会知道SpreadJS整个页面显示就是一张大的canvas，canvas中是不能嵌入html元素的。所以直接嵌入肯定是不行。下面我们将一步一步叫您来实现这样的功能。

工欲善其事必先利其器，在实现这样的功能之前我们首先需要了解SpreadJS的按钮单元格相关功能：
https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/demos/buttonCellType
以及按钮点击的相关事件：
http://help.grapecity.com/spread/SpreadSheets12/webframe.html#SpreadJS~GC.Spread.Sheets.Events~ButtonClicked_EV.html
通过了解，我们发现按钮单元格只是一个普通按钮的功能，无法直接做到打开文件上传选择本地文件的功能，所以我们需要另辟蹊径。
结合上面的input，我们知道html的input标签是又这样的功能的，于是我们可以用SpreadJS内部的button的点击来调用html中的input，将这两个功能组合起来使用来达到我们的效果。
首先：
我们在外部的html的dom中创建一个input用于文件上传，但是我们不需要将其显示出来，所以在通过css将其隐藏起来

<input id="file" type="file" multiple="multiple" style="display:none"/>

复制代码

接下来，我们在SpreadJS中创建按钮单元格

var b1 = new GC.Spread.Sheets.CellTypes.Button();
b1.text('选择文件');
sheet.setCellType(3, 3, b1, GC.Spread.Sheets.SheetArea.viewport);

复制代码

之后添加相关的按钮点击事件

spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function (e, args) {
});

复制代码

在事件中，我们判断到点击的按钮之后呢，通过代码触发，调用外部input的点击事件，整个buttonclicked的处理如下：

spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function (e, args) {
var sheet = args.sheet, row = args.row, col = args.col;
var cellType = sheet.getCellType(row, col);
if (cellType instanceof GC.Spread.Sheets.CellTypes.Button) {
if(cellType.text()=="选择文件"){
$("#file").click();
}
}
});

复制代码

最后，我们通过监听外部input的change事件，在事件中我们可以捕获到上传的文件对象以及信息，将信息在SpreadJS中显示出来，完成文件上传的显示

$("#file").change(function () {
spread.suspendPaint();
var uploadFileArr = document.getElementById("file").files;
for(var i=0;i<uploadFileArr.length;i++){
sheet.setValue(3+i,2,uploadFileArr[i].name);
sheet.getCell(3+i, 2, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("black",GC.Spread.Sheets.LineStyle.thick), { all:true },3);
}
sheet.autoFitColumn(2);
spread.resumePaint();
});

复制代码

顺便说一下，既然我们已经在上面拿到了文件上传的对象，那么接下来我们就可以任意去处理它了。
以上就是如何在SpreadJS中实现文件上传，我将demo示例同步上传到附件中，有兴趣的朋友可以下载后运行查看效果

		自动登录	找回密码
密码			立即注册

SpreadJS实现文件上传按钮的功能

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄