使用ajaxFileUpload实现导入Excel
来源：互联网 发布：如何自制app软件 编辑：程序博客网 时间：2024/06/18 00:14
1.通过使用ajaxFileUpload插件实现导入Excel表格，以下是jsp以及js部分
<%@ page language="java" pageEncoding="utf-8" %><%@include file="/WEB-INF/pages/common/taglibs.jsp"%><html><head><title>导入用户</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="${path}/js/ajaxfileupload.js" ></script><style type="text/css">input {border:1px solid;outline:none;line-height:normal;*overflow:visible}.inpo{margin-top: 20px;}.divBig{height: 40px; text-align: center; margin-top:5%; margin-bottom: 5%;}</style><script type="text/javascript">function checkExcel(){var excelName = $("#file").val();var fileTArr=excelName.split("."); //切割出后缀文件名 var filetype=fileTArr[fileTArr.length-1]; if(filetype!=null && filetype!=""){ if(filetype == "xls" ){ $.ajaxFileUpload({ url: $.contextPath + "/userOp_importUsers", type: 'post', secureuri: false, data:{ }, fileElementId: 'file', dataType: 'json', success: function(rel, status){ console.log("rel.result "+rel.result); if(rel.result=='success'){ $.messager.alert('提示',"导入用户成功！",'info'); }else if(rel.result=='fail'){ $.messager.alert('提示',"导入过程发生错误！",'error'); } }, error: function(data, status, e){ $.messager.alert('提示', '与服务器通讯失败，请稍后再试！', 'error'); if(logOn)console.log('Cannot to create vm!'); if(logOn)console.log(rel); } }); }else{ $.messager.alert('提示',"请上传正确的Excel文件，只能上传后缀为'xls'的Excel文件！",'info'); } }else{ $.messager.alert('提示',"请上传excel（后缀为'xls'）文件！",'info'); }}//下载导入模板function downloadImportExcel(){var url="${path}/download.action?fileName="+encodeURI(encodeURI("/importExcel/importUsers-Demo.xls"));console.log("url "+url);window.open(url); return;}</script></head><body><form id="inputForm" action="${path}/userOp_importUsers" method="post" enctype="multipart/form-data"><div style="margin-top: 20px;"><table width="80%" class="list" border="0" cellpadding="0" cellspacing="0" align="center"><tr> <td width="30%" style="text-align:left;" bgcolor="#fafcfd"><span style="color: red;" >*</span><span id="uploadFile">上传文件：</span></td> <td width="70%"><input type="file" name="file" id="file" value="" style="width:100%;height:22px;" /></td> </tr></table></div><div style="margin-top: 10px;margin-left: 20px;"><span id="fileconFrom"><strong>上传文件内容格式说明：</strong><br/>1.导入文件应为Office Excel文件；<br>2.导入文件暂不支持Office 2007及以后版本的Excel文件，如您使用的是Office 2007及以后版本，请把Excel文件转换为2003或之前的版本格式，具体转换方式为：打开的Excel文件中，选择“另存为”->“Excel 97-2003工作簿”；<br>3.进行导入操作时，请确保您导入的文件并未处于使用状态。</span><br></div><div style="margin-top: 10px;margin-left: 20px;"><span id="filecontTo"><strong>上传文件内容示例：</strong></span><br/><span><a href="#" id="loadExcelHref" onclick="downloadImportExcel()" title="点击下载"><span id="loadExcel" style="color:red;width:100%;">点击下载Excel导入示例</span></a></span></div> <div class="divBig"> <button id="btn_import" onclick="checkExcel();" class="btn btn-warning" type="button" style="margin:auto 0;">确认导入</button> </div></form></body></html>2.ajaxfileupload.js插件
jQuery.extend({ createUploadIframe: function (id, uri) {//id为当前系统时间字符串，uri是外部传入的json对象的一个参数 //create frame var frameId = 'jUploadFrame' + id; //给iframe添加一个独一无二的id var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"'; //创建iframe元素 if (window.ActiveXObject) {//判断浏览器是否支持ActiveX控件 if (typeof uri == 'boolean') { iframeHtml += ' src="' + 'javascript:false' + '"'; } else if (typeof uri == 'string') { iframeHtml += ' src="' + uri + '"'; } } iframeHtml += ' />'; jQuery(iframeHtml).appendTo(document.body); //将动态iframe追加到body中 return jQuery('#' + frameId).get(0); //返回iframe对象 }, createUploadForm: function (id, fileElementId, data) {//id为当前系统时间字符串，fileElementId为页面<input type='file' />的id，data的值需要根据传入json的键来决定 //create form var formId = 'jUploadForm' + id; //给form添加一个独一无二的id var fileId = 'jUploadFile' + id; //给<input type='file' />添加一个独一无二的id var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data" ></form>'); //创建form元素 if (data) {//通常为false for (var i in data) { jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); //根据data的内容，创建隐藏域，这部分我还不知道是什么时候用到。估计是传入json的时候，如果默认传一些参数的话要用到。 } } var oldElement = jQuery('#' + fileElementId); //得到页面中的<input type='file' />对象 var newElement = jQuery(oldElement).clone(); //克隆页面中的<input type='file' />对象 jQuery(oldElement).attr('id', fileId); //修改原对象的id jQuery(oldElement).before(newElement); //在原对象前插入克隆对象 jQuery(oldElement).appendTo(form); //把原对象插入到动态form的结尾处 //set attributes jQuery(form).css('position', 'absolute'); //给动态form添加样式，使其浮动起来， jQuery(form).css('top', '-1200px'); jQuery(form).css('left', '-1200px'); jQuery(form).appendTo('body'); //把动态form插入到body中 return form; }, ajaxFileUpload: function (s) {//这里s是个json对象，传入一些ajax的参数 // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); //此时的s对象是由jQuery.ajaxSettings和原s对象扩展后的对象 var id = new Date().getTime(); //取当前系统时间，目的是得到一个独一无二的数字 var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data)); //创建动态form var io = jQuery.createUploadIframe(id, s.secureuri); //创建动态iframe var frameId = 'jUploadFrame' + id; //动态iframe的id var formId = 'jUploadForm' + id; //动态form的id // Watch for a new set of requests if (s.global && !jQuery.active++) {//当jQuery开始一个ajax请求时发生 jQuery.event.trigger("ajaxStart"); //触发ajaxStart方法 } var requestDone = false; //请求完成标志 // Create the request object var xml = {}; if (s.global) jQuery.event.trigger("ajaxSend", [xml, s]); //触发ajaxSend方法 // Wait for a response to come back var uploadCallback = function (isTimeout) {//回调函数 var io = document.getElementById(frameId); //得到iframe对象 try { if (io.contentWindow) {//动态iframe所在窗口对象是否存在 xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null; xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document; } else if (io.contentDocument) {//动态iframe的文档对象是否存在 xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null; xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document; } } catch (e) { jQuery.handleError(s, xml, null, e); } if (xml || isTimeout == "timeout") {//xml变量被赋值或者isTimeout == "timeout"都表示请求发出，并且有响应 requestDone = true; //请求完成 var status; try { status = isTimeout != "timeout" ? "success" : "error"; //如果不是“超时”，表示请求成功 // Make sure that the request was successful or notmodified if (status != "error") { // process the data (runs the xml through httpData regardless of callback) var data = jQuery.uploadHttpData(xml, s.dataType); //根据传送的type类型，返回json对象，此时返回的data就是后台操作后的返回结果 // If a local callback was specified, fire it and pass it the data if (s.success) s.success(data, status); //执行上传成功的操作 // Fire the global callback if (s.global) jQuery.event.trigger("ajaxSuccess", [xml, s]); } else jQuery.handleError(s, xml, status); } catch (e) { status = "error"; jQuery.handleError(s, xml, status, e); } // The request was completed if (s.global) jQuery.event.trigger("ajaxComplete", [xml, s]); // Handle the global AJAX counter if (s.global && ! --jQuery.active) jQuery.event.trigger("ajaxStop"); // Process result if (s.complete) s.complete(xml, status); jQuery(io).unbind();//移除iframe的事件处理程序 setTimeout(function () {//设置超时时间 try { jQuery(io).remove();//移除动态iframe jQuery(form).remove();//移除动态form } catch (e) { jQuery.handleError(s, xml, null, e); } }, 100) xml = null } } // Timeout checker if (s.timeout > 0) {//超时检测 setTimeout(function () { // Check to see if the request is still happening if (!requestDone) uploadCallback("timeout");//如果请求仍未完成，就发送超时信号 }, s.timeout); } try { var form = jQuery('#' + formId); jQuery(form).attr('action', s.url);//传入的ajax页面导向url jQuery(form).attr('method', 'POST');//设置提交表单方式 jQuery(form).attr('target', frameId);//返回的目标iframe，就是创建的动态iframe if (form.encoding) {//选择编码方式 jQuery(form).attr('encoding', 'multipart/form-data'); } else { jQuery(form).attr('enctype', 'multipart/form-data'); } jQuery(form).submit();//提交form表单 } catch (e) { jQuery.handleError(s, xml, null, e); } jQuery('#' + frameId).load(uploadCallback); //ajax 请求从服务器加载数据，同时传入回调函数 return { abort: function () { } }; }, handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); } // Fire the global callback if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); } }, uploadHttpData: function (r, type) { var data = !type; data = type == "xml" || data ? r.responseXML : r.responseText; // If the type is "script", eval it in global context if (type == "script") jQuery.globalEval(data); // Get the JavaScript object, if JSON is used. if ( type == "json" ) //data = data.replace("<pre>","").replace("</pre>",""); data = jQuery.parseJSON(jQuery(data).text()); //data = eval("("+data.replace("<pre>","").replace("</pre>","")+")"); // evaluate scripts within html if (type == "html") jQuery("<div>").html(data).evalScripts(); return data; }}) 0 1
- 使用ajaxFileUpload实现导入Excel
- 使用AjaxFileUpload导入XML文件
- 使用ajaxfileupload实现
- 【C#MVC】使用ajaxFileUpload导入Excel，并显示在Grid中
- springmvc excel导入方法(jquery的ajaxfileupload上传excel文件)
- 使用ajaxFileUpload实现文件上传
- 使用SqlBulkCopy类实现导入excel表格
- 使用POI 实现 Excel 导入导出
- java中使用poi实现导入Excel
- 使用NOPI实现Excel导入导出类
- Spring使用POI实现Excel导入导出
- 使用apache poi 实现Excel批量导入
- Spring使用POI实现Excel导入导出
- 使用Java实现Excel导入功能
- 使用Jxl实现Excel导入导出
- 使用POI实现Excel导入与导出
- Spring使用POI实现Excel导入导出
- 使用ajaxfileupload实现文件异步上传
- Java之利用FreeMarker引擎实现枚举和脚本自动生成
- 42.局域网架构
- 补3，实验5.4
- JAVA 40个经典算法题
- 用一个textview显示数字，让数字从一个值渐变到另外一个值
- 使用ajaxFileUpload实现导入Excel
- spring 注释
- PHP学习笔记2：WAMPServer多站点配置
- java中的四种引用类型与垃圾回收
- php curl https 错误的解决办法
- 《我编程，我快乐——程序员职业规划之道》 读书笔记
- 指针的学习
- react-native-barcodescanner调用实现二维码扫描
- 【精】搭建redis cluster集群，JedisCluster带密码访问【解决当中各种坑】！
