无刷新CSV上传与Asp.NET+JS解析示例

19 浏览量更新于2024-08-30 收藏 44KB PDF 举报

在ASP.NET和JavaScript结合的无刷新上传CSV文件的场景中，开发者利用HTML、CSS和JavaScript编写了一段简洁的代码来实现文件上传和验证功能。以下是关键知识点的详细解析： 1. **HTML结构**：开头部分定义了HTML的基本结构，包括`<!DOCTYPE html>`声明，以及`<html>`元素，设置了XML命名空间`xmlns="http://www.w3.org/1999/xhtml"`，并创建了一个`<head>`标签用于包含`<title>`标签（实际内容未给出）。 2. **JavaScript函数**： - **`function FinishUpload(filePath)`**: 这个函数用于处理上传完成后的操作。当上传成功时，它会重置表单(`document.getElementById("uploadForm").reset();`)，并在用户界面上显示一条消息，通知导入文件路径(`alert("ImportedSuccessfullyto" + decodeURIComponent(filePath) + "!");`)。如果上传失败，会提示错误信息。 - **`function UploadFile()`**: 该函数是上传的核心逻辑。首先，通过`document.getElementById("txtFile").value`获取用户选择的文件路径，然后检查后缀名是否为CSV（通过`.toLowerCase().indexOf("csv") < 0`判断）。如果不是CSV文件，则清空表单并显示提示信息，阻止上传。如果是CSV，设置表单的`encoding`属性为`"multipart/form-data"`，这是支持文件上传的HTTP编码方式，然后提交表单。 - **`function ResetFile(file)`**: 这个辅助函数用于在文件上传过程中临时创建一个新的`<form>`元素，用来插入上传的文件，确保原始文件不会被替换或丢失。 3. **文件上传验证**：在`UploadFile`函数中，对上传文件的类型进行了限制，只允许用户选择CSV文件。这样做可以防止意外上传其他类型的文件，提高安全性。 4. **无刷新上传**：由于没有服务器端的代码片段，我们可以推断这段代码是通过前端JavaScript实现的无刷新上传，这意味着上传过程不会导致页面重载，提高了用户体验。 5. **文件路径处理**： `decodeURIComponent(filePath)`用于解码用户输入的URL编码路径，这在处理用户提供的文件路径时非常常见，以便在后续处理中正确解析。这个代码示例展示了如何使用ASP.NET和JavaScript进行简单的无刷新CSV文件上传，并对上传文件进行了基本的类型检查。实际项目中可能还需要配合服务器端处理（如C#代码），例如验证服务器接收到的文件内容、存储或进一步处理CSV数据等。

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”>

<head>

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”>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

</body>

</html>

处理文件上传的c#

代码如下:

if (context.Request.Files.Count > 0)

{

HttpPostedFile file = context.Request.Files[0];

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38650951

粉丝: 5

无刷新CSV上传与Asp.NET+JS解析示例

无刷新ASP.NET+JS上传CSV文件并解析示例

ASP.NET+Jquery实现无刷新TreeGrid技术解析

ASP.NET+Ajax实现文本文件静态分页代码解析

ASP．NET与Excel的交互

Ajax,jqgrid,标签页Iframe进销存代码

使用Ajax生成的Excel文件并下载的实例

ajax +access 留言板

*** C#实现TXT通讯录应用案例解析

MSChart控件深度解析：数据绑定与AJAX应用

MSChart深度解析：数据源、交互与AJAX应用详解

最新资源