在WeX5中上传excel至数据库库表

Masion · 发表于 2016-3-3 16:00:48

最近在做一个考试app，需要用户上传题库到库表
题库的结构如下：

捕获.PNG

上传文件的界面如下图所示：
捕获.PNG

Masion · 发表于 2016-4-30 21:15:56

kenminkajp 发表于 2016-4-30 17:31
及时雨，我来好好消化要是把文件结构抓个图，就更好了

代码这个东西，最重要的还是自己消化
有个人给指个线索已经很不错了

Masion · 发表于 2016-3-3 17:14:07

我利用这个方法向数据库中插入了16000条数据，用时不到十秒。记录再多会有内存溢出
baas和baasServer需要引入相应的jar包，poi-bin-3.13-20150929 可以在网上搜到
另外还需要 xbean.jar

Masion · 发表于 2016-3-3 16:05:37

前端：

参考起步案例，$model/UI2/demo/actions/process/invokeAction/mainActivity.w中的 form表单提交的案例

这里也是采用form表单提交
传到后台去 2个参数（storeFileName和examBankID）和一个二进制文件

界面上放一个form（html），两个input 、一个input type=file和一个button按钮
相关的html源码如下：

<form action="/baas/fishbear/fishbearWeixin/uploadPic" xid="postForm" accept="application/json" enctype="multipart/form-data" target="postResultIframe" class="form-horizontal container-fluid" method="post"><div class="form-group" xid="formGroup9">
<div class="col-sm-2" xid="col37">
<label class="control-label" xid="controlLabel15">file</label></div>
<div class="col-sm-10" xid="col38">
<input class="form-control" xid="uploadFile" name="file" type="file"></input></div> </div>
<div class="form-group" xid="formGroup8">
<div class="col-sm-2" xid="col24">
<label class="control-label" xid="controlLabel14"><![CDATA[storeFileName]]></label></div>
<div class="col-sm-10" xid="col25">
<input class="form-control" xid="uploadFileName" name="storeFileName"></input></div> </div><div class="form-group" xid="formGroup1">
<div class="col-sm-2" xid="col2">
<label class="control-label" xid="controlLabel1"><![CDATA[examBankID]]></label></div>
<div class="col-sm-10" xid="col1">
<input class="form-control" xid="input1" name="examBankID"></input></div> </div><div class="form-group" xid="formGroup19">
<div class="col-sm-3" xid="col46">
<a component="$UI/system/components/justep/button/button" class="btn btn-success form-control" label="上传文件（Post）" xid="postBtn" onClick="postBtnClick">
<i xid="i14"></i>
<span xid="span16">上传文件（Post）</span></a> </div> </div>
<div class="form-group" xid="formGroup10" style="display:none;">
<div class="col-sm-2" xid="col45">
<label class="control-label" xid="controlLabel17">接收返回内容</label></div>
<div class="col-sm-10" xid="col42">
<iframe src="" xid="postResultIframe" name="postResultIframe" width="100%" height="100px"></iframe></div> </div>
</form>

复制代码

Masion · 发表于 2016-3-3 16:18:27

可以利用input type=file的accept属性对用户看到的文件做一些过滤，

比如：要求用户选择excel文件可以： accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
要求用户选择图片文件可以： accept="image/*"
当然，完全避免用户选择错误文件需要在用户选择后增加判断，可以在 input type=file的onChange事件中（检查用户是否选择了图片）

Model.prototype.file1Change = function(event){
//从选取文件对话框返回后，检查用户是否选择了文件，是否选择了图片文件
if(!event.target.files){ //如果客户没有选择相关文件，直接返回
return;
}
var $inputImage = $( this.getElementByXid('inputImage')); //用jQuery拿到input标签
var file = event.target.files[0]; //拿到用户选择的文件
if (/^image\/\w+$/.test(file.type)) { //如果是图片文件
} else { //如果用户选的的不是图片文件
justep.Util.hint('请选择图片文件！');
$inputImage.val('');
}
};

复制代码

Masion · 发表于 2016-3-3 16:58:49

用户填写完examBankID和storeFileName
点击上传文件按钮的js代码

var form = this.getElementByXid("postForm"); //拿到form表单的js对象
var postResultIframe = this.getElementByXid("postResultIframe"); //拿到用于显示返回结果的iFrame组件的js对象
form.attributes["action"].value = require.toUrl("/baas/fishbear/fishbearWeixin/myUploadPic?");
// 在form目标iframe的onload事件中以回调方式获取返回值
//var parentWindow = window;
$(postResultIframe).load(function(){
var iframeWindow = this.contentWindow;
iframeWindow.setTimeout(function() {
var doc = iframeWindow.document.XMLDocument ? iframeWindow.document.XMLDocument : iframeWindow.document;
var returnJson=JSON.parse($(doc).text());
// 判断动作调用是否成功
if (returnJson.result == "成功") {
justep.Util.hint("附件上传成功");
} else {
justep.Util.hint("上传失败");
}
}, 1);
});
// 提交表单
$(form).submit();

复制代码

Masion · 发表于 2016-3-3 17:10:15

在baas中的对应的java建立自定义的action
怎么建立和定义action请参考起步官方视频WeX5后台调用

//接收前台传过来的excel，存到数据库
public static JSONObject myUploadExcel(JSONObject params, ActionContext context) throws SQLException, NamingException {
HttpServletRequest request = (HttpServletRequest)context.get(ActionContext.REQUEST);
HashMap<String,String> fields = new HashMap<String,String>(); //用于存放前台传过来的input参数
InputStream is = null; //用于存放前台传过来的二进制文件输入流
JSONObject ret=new JSONObject();
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
String values="";
try {
@SuppressWarnings("unchecked")
List<FileItem> items = upload.parseRequest(request); //把用form提交过来的request转换为list
Iterator<FileItem> iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (!item.isFormField()) { //如果是二进制文件输入流
is = item.getInputStream();
}else{ //如果是input参数，把input参数放到fields的map对象里面
String name = item.getFieldName();
String value = URLDecoder.decode(item.getString(), "UTF-8").replaceAll("\\\", "/");
fields.put(name, value); //把表单域的名字和值放到params中
System.out.println(fields.get("fileName"));
}
}
if(is==null || fields.get("fileName")==null||fields.get("fileName").length()<=0){ //如果文件为空或者文件名或者examBankID为空，则返回上传文件失败
ret.put("result", "失败");
}else{
// 把excel内容传到数据库中
Workbook workbook = org.apache.poi.ss.usermodel.WorkbookFactory.create(is); //将二进制文件输入流转换为excelWorkbook（兼容2003和2007格式）
Sheet sheet=workbook.getSheetAt(0); //拿到excel工作簿中的第一个sheet
int rows=sheet.getPhysicalNumberOfRows(); //计算sheet中有多少行
for(int i=1;i<rows;i++){ //遍历sheet中的行，从第二行开始
org.apache.poi.ss.usermodel.Row row=sheet.getRow(i); //拿到第i行
if(row!=null){ //拼要插到sql语句中的值，因为是mySql所以简单些
values+="(UUID(),0,'fExamBankID',"+i+",'"+row.getCell(0)+"','"+row.getCell(1)+"','','"+row.getCell(6)+"','"+row.getCell(2)+"','"+row.getCell(3)+"','"+row.getCell(4)+"','"+row.getCell(5)+"'),";
}
}
values=values.substring(0, values.length()-1); //去掉最后的逗号
values="insert into examquestion (fID,version,fExamBankID,fNO,fType,fQuestion,fQuestionPic,fCorrectAnswer,fOptionA,fOptionB,fOptionC,fOptionD)"+
"values"+ values;
Connection conn= context.getConnection("fishbearWeixin"); //拿到数据库连接
PreparedStatement pstmt = conn.prepareStatement(values); //执行插入
pstmt.executeUpdate();
pstmt.close();
}
is.close();
ret.put("result", "成功");
} catch (FileUploadException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return ret;
}

复制代码

Masion · 发表于 2016-3-3 17:15:07

另外再附一个上传图片或其他附件到服务器的java action

//接收前台传过来的图片，存到指定位置
public static JSONObject myUploadPic(JSONObject params, ActionContext context) throws SQLException, NamingException, IOException {
HttpServletRequest request = (HttpServletRequest)context.get(ActionContext.REQUEST);
HashMap<String,String> fields = new HashMap<String,String>();
InputStream is = null;
JSONObject ret=new JSONObject();
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
FileOutputStream fos=null;
try {
@SuppressWarnings("unchecked")
List<FileItem> items = upload.parseRequest(request);
Iterator<FileItem> iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (!item.isFormField()) {
is = item.getInputStream();
}else{
String name = item.getFieldName();
String value = URLDecoder.decode(item.getString(), "UTF-8").replaceAll("\\\", "/");
fields.put(name, value); //把表单域的名字和值放到params中
// System.out.println(fields.get("fileName"));
}
}
if(is==null || fields.get("storeFileName")==null||fields.get("storeFileName").length()<=0){
ret.put("result", "失败");
}else{
// 保存文件
String X5Base = System.getProperty("user.dir").substring(0, System.getProperty("user.dir").lastIndexOf("\"));
X5Base=X5Base+"\\model\\UI2\\fishbearWeixin\\imgWH";
String storePath = X5Base + File.separator + fields.get("examBankID");
File storeDir = new File(storePath);
if(!(storeDir.exists() && storeDir.isDirectory())){
storeDir.mkdirs();
}
File toStoreFile = new File(storePath + File.separator + fields.get("storeFileName"));
fos = new FileOutputStream(toStoreFile);
copyStream(is,fos,1024); //将is中的二进制流写到fos文件中
fos.close();
is.close();
ret.put("result", "成功");
}
} catch (FileUploadException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return ret;
}
private static long copyStream(InputStream input, OutputStream output, int bufferSize) throws IOException {
byte[] buffer = new byte[bufferSize];
int readCount = 0;
long allCount = 0;
while (true) {
readCount = input.read(buffer);
if (readCount > 0) {
output.write(buffer, 0, readCount);
output.flush();
allCount += readCount;
} else
break;
}
return allCount;
}

复制代码

biyaooo · 发表于 2016-3-3 17:18:47

太厉害了，赞赞

regmail_only · 发表于 2016-3-9 20:38:54

这不是一般的功力！赞

SteveRogers · 发表于 2016-3-23 15:40:37

不错

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

[分享] 在WeX5中上传excel至数据库库表