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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
node内置调试方法总结
2018/02/22 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
Python输入二维数组方法
2018/04/13 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
高一学生期末评语
2014/04/25 职场文书
土木工程求职信
2014/05/29 职场文书
汽车专业求职信
2014/06/05 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
保安辞职信范文
2015/02/28 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
Spring整合Mybatis的全过程
2021/06/28 Java/Android