手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >asp.net+js 实现无刷新上传解析csv文件的代码
asp.net+js 实现无刷新上传解析csv文件的代码
摘要:前阵子工作中用到,贴上代码,仅保留上传有关的代码,发现code其实很少。上传页面html/js复制代码代码如下:functionFinish...

前阵子工作中用到,贴上代码,仅保留上传有关的代码,发现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' border="0" >

<tr>

<td>

<input id="txtFile" name="txtFile" type="file" />

<iframe name="hidIframe" id="hidIframe" ></iframe>

</td>

</tr>

<tr>

<td>

<input type="button" id="btnImportOK" value="Upload" />

<input type="button" id="btnImportCancel" 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 == '')

{

}

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+js 实现无刷新上传解析csv文件的代码】相关文章:

无刷新上传文件并返回自定义值

javascript实现炫酷的拖动分页

javascript常用方法总结

原生javascript实现解析XML文档与字符串

javascript实现控制的多级下拉菜单

用JavaScript实现对话框的教程

javascript实现查找数组中最大值方法汇总

实现DIV圆角的JavaScript代码

JavaScript实现斗地主游戏的思路

jquery实现点击label的同时触发文本框点击事件的方法

精品推荐
分类导航