以下是详细讲解“asp.net web大文件上传带进度条实例代码”的完整攻略，包括示例说明。
1.前言
在asp.net web应用程序中，文件上传是常见的功能之一。但是，如果需要上传大文件，固定的文件上传方式会带来一些问题，比如上传时间长、上传进度不确定等。
为了解决这些问题，我们可以使用带有进度条的大文件上传方式，以便让用户明确了解文件上传的状态。
2.步骤
下面是完整的大文件上传带进度条的实现步骤：
2.1 创建页面
首先，创建一个新的ASP.NET页面，例如Upload.aspx。该页面包含两个元素：
- input控件用于选择文件（type="file"）；
- 一个按钮，单击后开始上传文件。
2.2 上传文件
当用户点击上传按钮时，客户端应该使用Javascript将文件上传到服务器。您可以使用XMLHttpRequest对象完成此操作，如下所示：
function uploadFile() {
var file = document.getElementById("fileToUpload").files[0];
var xhr = new XMLHttpRequest();
// 创建一个新的FormData对象
var formData = new FormData();
formData.append("file", file);
xhr.upload.addEventListener("progress", function (event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total;
// 显示上传进度
document.getElementById("uploadProgress").value = Math.round(percentComplete * 100);
}
}, false);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 上传完成
}
};
xhr.open("POST", "UploadHandler.ashx");
xhr.send(formData);
}
注意，这段代码中最关键的部分是创建一个新的XMLHttpRequest对象，并将文件打包在FormData对象中发送到服务器。
我们还使用xhr.upload.addEventListener()函数监视上传的进度，并更新一个带有id="uploadProgress"的HTML元素，以显示上传的百分比。
在将FormData对象提交到服务器之后，当xhr.readyState = 4且xhr.status = 200时，响应已经成功返回。在这种情况下，可以调用服务器返回的任何信息。
2.3 服务器端代码
最后，我们需要在服务器端处理上传的文件。在C＃中，通常使用一个名为“http://www.w3.org/2000/xmlns/''>IHttpHandler”的接口来处理上传的文件。
在IHttpHandler实现中，您可以将HTTP请求的文件指针读取到内存中，并将上传的进度保存在会话变量中。然后，您可以使用相应的HttpResponse对象将进度信息返回到客户端。
public class UploadHandler : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 获得上传文件
HttpPostedFile file = context.Request.Files["file"];
// 存储文件
file.SaveAs(context.Server.MapPath("~/UploadedFiles/" + file.FileName));
// 更新上传进度
int uploadedBytes = Convert.ToInt32(context.Session["UploadedBytes"]);
uploadedBytes += file.ContentLength;
context.Session["UploadedBytes"] = uploadedBytes;
int totalBytes = Convert.ToInt32(context.Session["TotalBytes"]);
// 上传完成后，返回结果
if (uploadedBytes == totalBytes)
{
context.Response.ContentType = "text/html";
context.Response.Write("Finished");
}
else
{
context.Response.ContentType = "text/plain";
context.Response.Write((uploadedBytes * 100 / totalBytes).ToString());
}
}
public bool IsReusable
{
get { return false; }
}
}
在上面的代码中，我们使用context.Request.Files["file"]获取HTTP请求的文件，然后将它保存到服务器上的特定文件夹中。我们还使用会话变量来跟踪上传的进度，并在完成上传后返回相应的信息。
3.示例说明
3.1 示例1：上传单个文件
假设我们要上传一个名为“example.jpg”的文件。首先，我们需要在Upload.aspx页面上包含file input控件和上传按钮如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form enctype="multipart/form-data" method="post">
<input type="file" id="fileToUpload" name="fileToUpload" /><br />
<input type="button" id="btnUpload" value="上传" onclick="uploadFile();" /><br />
<progress id="uploadProgress" value="0" max="100"></progress>
</form>
<script type="text/javascript">
function uploadFile() {
var file = document.getElementById("fileToUpload").files[0];
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append("file", file);
xhr.upload.addEventListener("progress", function (event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total;
document.getElementById("uploadProgress").value = Math.round(percentComplete * 100);
}
}, false);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.responseText == "Finished") {
alert("上传文件成功！");
}
}
};
xhr.open("POST", "UploadHandler.ashx");
xhr.send(formData);
}
</script>
</body>
</html>
当用户点击“上传”按钮时，Javascript函数uploadFile()将触发。该函数获取file input控件中的文件，并将其打包在FormData对象中，然后使用XMLHttpRequest对象将其发送到UploadHandler.ashx处理。
在服务器端，UploadHandler.ashx读取文件指针，并将上传的进度保存在会话变量中。然后，它将带有当前上传百分比的HTTP响应返回到客户端。
3.2 示例2：上传多个文件
如果您想上传多个文件，您需要稍微改变一下uploadFile()函数的实现。可以使用JavaScript的HTML5 File API实现此目的。File API是HTML5在Web浏览器中提供的一组API，可以让Web开发人员读取本地计算机上的文件。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form enctype="multipart/form-data" method="post">
<input type="file" id="fileToUpload" name="fileToUpload" multiple="" /><br />
<input type="button" id="btnUpload" value="上传" onclick="uploadFile();" /><br />
<progress id="uploadProgress" value="0" max="100"></progress>
</form>
<script type="text/javascript">
function uploadFile() {
var files = document.getElementById("fileToUpload").files;
var xhr = new XMLHttpRequest();
xhr.open("POST", "UploadHandler.ashx");
var i = 0;
var formData = new FormData();
for (; i < files.length; i++) {
formData.append(files[i].name, files[i]);
}
xhr.upload.addEventListener("progress", function (event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total;
document.getElementById("uploadProgress").value = Math.round(percentComplete * 100);
}
}, false);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.responseText == "Finished") {
alert("上传文件成功！");
}
}
};
xhr.send(formData);
}
</script>
</body>
</html>
改变实现的主要部分在于，我们使用JavaScript的File API，来遍历用户选择的所有文件，并将它们打包在一个FormData对象中，然后使用XMLHttpRequest对象将其发送到服务器上的处理程序UploadHandler.ashx。
需要注意的是，当我们使用File API时，上传的文件必须以FormData方式发送到服务器。这意味着XHR（XMLHttpRequest）必须使用xhr.send(formData);发送我们打包的文件。我们也要确保xhr对象在打开请求之前进行适当配置，如xhr.open('POST', 'UploadHandler.ashx', true)。
4.总结
通过本文提供的实例代码，我们可以了解到如何在ASP.NET web应用程序中实现大文件上传带进度条的功能。我们需要使用XMLHttpRequest对象将文件打包在FormData中，并使用XHR对象从客户端将其发送到服务器上的处理程序中，然后在服务器端读取文件并将上传的进度保存在会话变量中。最后，我们返回HTTP响应以将上传的进度发送回客户端显示。同时还提供了两个实例说明，让读者们深入了解如何上传单个文件和多个文件。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：asp.net web大文件上传带进度条实例代码 - Python技术站
微信扫一扫 
支付宝扫一扫 