asp.net+js 实现无刷新上传解析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);

  }

  点击下载