无刷新上传execl文件并显示到客户端网页
思路：上传文件无刷新要用一个隐藏框架标签来提交表单，使得客户端好像没有刷新，实际是提交了表单，然后回传上传文件名，在用AJAX请求服务器去读取xls文件并回显到客户端。
首先html代码：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery.js"></script> <style type="text/css"> body { background-color:black; } #ulmenu { list-style-type: none; background-color:white; } #ulmenu li { margin-bottom:20px; } #ulmenu li span { display:inline-block; width:80px; margin-left: 50px; } </style> <script type="text/javascript"> function ajax(msg) { //从框架获执行的，获得上传的xls文件地址 $.post("execl.ashx", { file: msg }, function (data) { $("#text").html(data); //返回数据显示到页面 }); } </script> </head> <body> <!--隐藏框架，看似没有刷新 --> <iframe name="ajaxifr" style="display:none"> </iframe> <form method="post" enctype="multipart/form-data" action="upload.ashx" target="ajaxifr"> <div> <input type="file" name="file" id="file"/> <input type="submit" value="加载Execl" /> </div> <div id="text"></div> </form> </body>
让隐藏框架去跳转上传页面。
upload.ashx处理程序代码：
public void ProcessRequest(HttpContext context) { if (context.Request.Files["file"] != null) { //判定是否选择了文件和大小不能大于1MB if (context.Request.Files["file"].ContentLength > 0 && context.Request.Files["file"].ContentLength<1024*1024) { int length=context.Request.Files["file"].FileName.Length; string str = context.Request.Files["file"].FileName.Substring(length-3); //判定是否为xls文件 if (str == "xls") { //保存上传文件 string name = Guid.NewGuid() + context.Request.Files["file"].FileName; string file = context.Server.MapPath("execl/") + name; context.Request.Files["file"].SaveAs(file); //写回客户端保存的execl文件名，调用AJAX显示数据 context.Response.Write("<script>window.parent.ajax('" + name + "');</script>"); } else { context.Response.Write("<script type='text/javascript'>alert('文件格式错误~');</script>"); } } else { context.Response.Write("<script type='text/javascript'>alert('请选择上传文件和文件必须小于1MB~');</script>"); } } } public bool IsReusable { get { return true; } } }
有了这个enctype="multipart/form-data"，就可以上传和获取文件名了，然后保存。
用window.parent调用主页面函数ajax()请求execl.ashx读取execl文件并无刷新回显数据。
处理程序execl.ashx 代码：
public void ProcessRequest(HttpContext context) { if (context.Request["file"] != null) { string name = context.Request["file"]; string file = context.Server.MapPath("execl/") + name; if (LoadExcel(file) != null) { //读取文件存到DataSet中 DataSet ds = LoadExcel(file); if (ds.Tables.Count > 0) { DataTable dt = ds.Tables[0]; StringBuilder json = new StringBuilder(); //生成网页数据 json.Append("<ul id='ulmenu'>"); json.Append("<li>"); for (int n = 0; n < dt.Columns.Count; n++) { json.Append("<span>"); json.Append(dt.Columns[n].ColumnName); json.Append("</span>"); } json.Append("</li>"); for (int i = 0; i < dt.Rows.Count; i++) { json.Append("<li>"); for (int n = 0; n < dt.Columns.Count; n++) { json.Append("<span>"); json.Append(dt.Rows[i][n]); json.Append("</span>"); } json.Append("</li>"); } json.Append("</ul>"); //处理后的数据回传给客户端 context.Response.Write(json); } else { context.Response.Write("没有此文件"); } } } } public DataSet LoadExcel(string filePath) { try { string strConn; strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + filePath + ";Extended Properties=\"Excel 8.0;IMEX=1\";"; OleDbConnection OleConn = new OleDbConnection(strConn); OleConn.Open(); //返回Excel的架构，包括各个sheet表的名称,类型，创建时间和修改时间等 DataTable dt = OleConn.GetOleDbSchemaTable(OleDbSchemaGuid.Tables, new object[] { null, null, null, "Table" }); //第三列TABLE_NAME为Excel表名 string sheet = dt.Rows[0]["TABLE_NAME"].ToString(); String sql = "SELECT * FROM [" + sheet + "]"; OleDbDataAdapter OleDaExcel = new OleDbDataAdapter(sql, OleConn); DataSet OleDsExcle = new DataSet(); OleDaExcel.Fill(OleDsExcle, "Sheet1"); OleConn.Close(); return OleDsExcle; } catch (Exception ex) { return null; } } public bool IsReusable { get { return false; } } }
把execl当数据库文件读取返回生成网页格式给AJAX请求，可也已返回Json格式，客户端再去处理成网页格式。
