asp.net+js 实现无刷新上传解析csv文件的代码

更新时间：2010年05月17日 23:50:11 作者：

无刷新上传解析csv文件的实现代码，需要的朋友可以参考下。

前阵子工作中用到，贴上代码，仅保留上传有关的代码，发现code其实很少。
上传页面html/js

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title></title> 
<script type="text/javascript"> 
function FinishUpload(filePath) { 
document.getElementById("uploadForm").reset(); 
if (!filePath) { 
alert("Import Failed!"); 
} 
else { 
alert("Imported Successfully to " + decodeURIComponent(filePath) + "!"); 
} 
} 
function UploadFile() { 
var arr = document.getElementById("txtFile").value.split('.'); 
var fileType = arr[arr.length - 1]; 
if (fileType.toLowerCase().indexOf("csv") < 0) { 
document.getElementById("uploadForm").reset(); 
alert("Please select a csv file."); 
return false; 
} 
document.getElementById("uploadForm").encoding = "multipart/form-data"; 
document.getElementById("uploadForm").submit(); 
} 
function ResetFile(file) { 
var tmpForm = document.createElement('form'); 
file.parentNode.insertBefore(tmpForm, file); 
tmpForm.appendChild(file); 
tmpForm.reset(); 
tmpForm.removeNode(false); 
} 
</script> 
</head> 
<body> 
<form id="uploadForm" name="uploadForm" action="Upload.ashx" method="post" target="hidIframe" enctype="multipart/form-data"> 
<table cellpadding='0' cellspacing='0' style="width:100%;height:100%;border-collapse:collapse;" border="0" > 
<tr> 
<td> 
<input id="txtFile" name="txtFile" type="file" style="border:solid 1px Gray;" /> 
<iframe name="hidIframe" id="hidIframe" style="display:none;" ></iframe> 
</td> 
</tr> 
<tr> 
<td> 
<input type="button" id="btnImportOK" value="Upload" onclick="UploadFile();" /> 
<input type="button" id="btnImportCancel" onclick="ResetFile(document.getElementById('txtFile'))" value="Reset"/> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 

　
处理文件上传的c#

复制代码代码如下:

 
if (context.Request.Files.Count > 0) 
{ 
HttpPostedFile file = context.Request.Files[0]; 
if (file.ContentLength > 0) 
{ 
string title = string.Empty; 
title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName); 
string path = "./Upload/" + title; 
path = System.Web.HttpContext.Current.Server.MapPath(path); 
file.SaveAs(path); 
context.Response.Write("<script>window.parent.FinishUpload('" + HttpUtility.UrlEncode(path) + "');</script>"); 
} 
} 
else 
{ 
context.Response.Write("<script>window.parent.FinishUpload('');</script>"); 
} 

　　做到无刷新，基本原理就是：通过表单提交到iframe里，从而使刷新发生在iframe里。form设置action指向处理上传的文件，target指向iframe。上传操作的结果可以返回到iframe里，调用父对象的FinishUpload方法显示是否上传成功。所以在AJAX未流行时，常用这种方法来伪装未刷新的效果，现在仍然可以使用。
要注意的是：
enctype="multipart/form-data"不可少，enctype默认编码是“application/x-www-form-urlencoded”，设置enctype="multipart/form-data"，用于二进制方式上传文件。
为防止文件名乱码，防止乱七八糟字符URL传递中出现问题，返回文件名到前台时进行HttpUtility.UrlEncode，在前台JS中取文件名时进行decodeURIComponent。
重置文件选择框时，要把文件选择框临时插入到临时表单，通过表单的reset方法重置。
顺便贴上解析上传的csv文件的code
解析csv文件

复制代码代码如下:

 
private DataTable ImportDataTable(string filepath) 
{ 
DataTable mydt = new DataTable("myTableName"); 
mydt.Columns.Add("Data ID", System.Type.GetType("System.String")); 
mydt.Columns.Add("Field Name", System.Type.GetType("System.String")); 
mydt.Columns.Add("New Value", System.Type.GetType("System.String")); 
DataRow mydr; 
using (System.IO.StreamReader mysr = new System.IO.StreamReader(filepath)) 
{ 
int data; 
char current; 
StringBuilder text = new StringBuilder(); 
IDictionary<int, List<string>> results = new Dictionary<int, List<string>>(); 
bool isInYinHao = false; ; 
int lineId = 1; 
int index = 0; 
while (true) 
{ 
data = mysr.Read(); 
if (data != -1) 
{ 
current = (char)data; 
if (current == '"') 
{ 
if (isInYinHao) 
{ 
isInYinHao = false; 
} 
else 
{ 
if (index > 0) 
{ 
text.Append(current); 
} 
isInYinHao = true; 
} 
} 
else if (current == ',') 
{ 
if (isInYinHao) 
{ 
text.Append(current); 
} 
else 
{ 
SaveResult(results, lineId, text); 
index = 0; 
continue; 
} 
} 
else if (current == '\r') 
{ 
if (isInYinHao) 
{ 
text.Append(current); 
} 
} 
else if (current == '\n') 
{ 
if (isInYinHao) 
{ 
text.Append(current); 
} 
else 
{ 
SaveResult(results, lineId, text); 
index = 0; 
lineId++; 
continue; 
} 
} 
else if (current == '\0') 
{ 
} 
else 
{ 
text.Append(current); 
} 
index++; 
} 
else 
{ 
//Read to file end. 
SaveResult(results, lineId, text); 
break; 
} 
} 
foreach (int id in results.Keys) 
{ 
mydr = mydt.NewRow(); 
for (int i = 0; i < results[id].Count; i++) 
{ 
if (i > 2) 
{ 
break; 
} 
mydr[i] = results[id][i]; 
} 
mydt.Rows.Add(mydr); 
} 
} 
return mydt; 
} 
private void SaveResult(IDictionary<int, List<string>> results, int lineId, StringBuilder text) 
{ 
if (!results.ContainsKey(lineId)) 
{ 
results.Add(lineId, new List<string>()); 
} 
results[lineId].Add(text.ToString()); 
text.Remove(0, text.Length); 
} 

点击下载

您可能感兴趣的文章:

基于javascript实现贪吃蛇经典小游戏
这篇文章主要为大家详细介绍了JS实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
关于js遍历表格的实例
js可以利用dom非常轻松的就可以遍历一个表格。当然只要是dom中有的所有对象都可以通过js来访问和处理
2013-07-07
H5实现仿flash效果的实现代码
这篇文章主要介绍了H5实现仿flash效果的实现代码的相关资料,希望通过本文能帮助到大家，实现这样的功能，需要的朋友可以参考下
2017-09-09
JavaScript中string对象
和JAVA中String对象用处一样啊，javascript中的String对象也有自己的方法，和JAVA中的类似。
2015-06-06
JS截取字符串常用方法详细整理
截取字符串的使用比较广泛，有很多中方法，本文粗略的整理了一些，感兴趣的额朋友可以才参考下
2013-10-10
浅谈js算法和流程控制
代码整体结构是执行速度的决定因素之一，代码量少不一定运行速度快，代码量多也不一定运行速度慢。本篇文章将对js的算法和流程控制进行介绍，下面跟着小编一起来看下吧
2016-12-12
一起学写js Calender日历控件
这篇文章主要和大家一起学写js Calender控件，自己动手编写了一个简易日历控件，感兴趣的小伙伴们可以参考一下
2016-04-04
微信小程序wx.request的简单封装
这篇文章主要介绍了微信小程序wx.request的简单封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
原生js基于canvas实现一个简单的前端截图工具代码实例
这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
这篇文章主要介绍了JavaScript实现下拉列表框数据增加、删除、上下排序的方法,涉及javascript针对页面下拉列表框元素的添加、删除及移动的相关技巧,具有一定参考借鉴,需要的朋友可以参考下
2015-08-08