一、js中引入公共支撑方法
//公共js <!-- The template to display files available for upload --> <script id="template-upload" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-upload fade"> <td> <span class="preview"></span> </td> <td> <strong class="error text-danger"></strong> </td> <td> <p class="size">Processing... <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div> </td> <td> {% if (!i && !o.options.autoUpload) { %} <button class="btn btn-primary start" disabled> <i class="glyphicon glyphicon-upload"></i> <span>Start</span> </button> {% } %} {% if (!i) { %} <button class="btn btn-warning cancel"> <i class="glyphicon glyphicon-ban-circle"></i> <span>Cancel</span> </button> {% } %} </td> </tr> {% } %} </script> <!-- The template to display files available for download --> <script id="template-download" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-download fade"> <td> <span class="preview"> {% if (file.thumbnailUrl) { %} [url={%=file.url%}]<img src="{%=file.thumbnailUrl%}">[/url] {% } %} </span> </td> <td> {% if (file.url) { %} [url={%=file.url%}]{%=file.name%}[/url] {% } else { %} <span>{%=file.name%}</span> {% } %} {% if (file.error) { %} <div><span class="label label-danger">Error</span> {%=file.error%}</div> {% } %} </td> <td> <span class="size">{%=o.formatFileSize(file.size)%}</span> </td> <td> {% if (file.deleteUrl) { %} <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}> <i class="glyphicon glyphicon-trash"></i> <span>Delete</span> </button> <input type="checkbox" name="delete" value="1" class="toggle"> {% } else { %} <button class="btn btn-warning cancel"> <i class="glyphicon glyphicon-ban-circle"></i> <span>Cancel</span> </button> {% } %} </td> </tr> {% } %} </script>
二、jsp页面加入导入出发按钮
//按钮 <button id="extremeImport" class="btn btn-primary btn-xs" type="button" onclick="document.getElementById('extremeFileupload').click();"><i class="icon-download-alt bigger-110"></i>导入</button> <span class="fileinput-button" id="basicreport_import" style="display: none;"> <input id="extremeFileupload" type="file" name="files[]" title="导入" onchange="waitingUpload_extreme();return false;"> </span>
三、对应导入js方法
//初始化导入 function initExtremeUploadFile(){ //文件上传地址 var basePath = $("#basePath").val(); var url = basePath + "importAnalysis?flagName=extreme"; // //初始化,主要是设置上传参数,以及事件处理方法(回调函数) $('#extremeFileupload').fileupload({ autoUpload: true,//是否自动上传 url: url,//上传地址 dataType: 'json', done: function (e, jsondata) {//设置文件上传完毕事件的回调函数 if(jsondata["result"].expName == 'errorFile'){ sinosoft.tip.warn("文件类型错误,不能解析!"); sinosoft.waiting.closeBodyWaiting(); }else if(jsondata["result"].expName!='error'){ //此处处理导入成功代码 }else{ sinosoft.tip.warn("导入数据没有按照格式填写,无法导入数据"); sinosoft.waiting.closeBodyWaiting(); } } }); }
四、后台对应方法共分三个方法
(1)公共解析Excel方法-参见ImportData.java
(2)公共调用Action-参见StaffImportAction.java
(3)私有的service方法,通过调用importData获取Excel解析的数据,并进行业务调用,示例代码,非公用StaffImportServiceImpl.java
五、在web.xml配置调用导入action
<servlet> <servlet-name>ImportStaff</servlet-name> <servlet-class>com.sinosoft.component.staff.view.StaffImportAction</servlet-class> </servlet> <servlet-mapping> <servlet-name>ImportStaff</servlet-name> <url-pattern>/importStaff</url-pattern> </servlet-mapping>