前阵子工作中用到，贴上代码，仅保留上传有关的代码，发现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);
}
点击下载
上传页面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);
}
点击下载
标签：
asp.net,无刷新,csv
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“asp.net+js 实现无刷新上传解析csv文件的代码”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。