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


Posted in Javascript onMay 17, 2010

前阵子工作中用到,贴上代码,仅保留上传有关的代码,发现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 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
JQuery中的ready函数冲突的解决方法
May 17 #Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 #Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 #Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 #Javascript
jQuery实现的立体文字渐变效果
May 17 #Javascript
jQuery实现的类flash菜单效果代码
May 17 #Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 #Javascript
You might like
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP调用其他文件中的类
2018/04/02 PHP
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
python八皇后问题的解决方法
2018/09/27 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
python中的django是做什么的
2020/07/31 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
Java如何格式化日期
2012/08/07 面试题
教育学专业实习生的自我鉴定
2013/11/26 职场文书
直接有效的自我评价
2014/01/11 职场文书
小班重阳节活动方案
2014/02/08 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
服务承诺口号
2014/05/22 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python