昆明阿里云代理商：asp.net实现无刷新文件上传并显示进度条(非服务器控件实现)

在ASP.NET中实现无刷新文件上传并显示进度条是非常实用的一个功能。本文将介绍一种非服务器控件实现的方法，通过使用Ajax和HTML5实现异步上传文件，并使用JavaScript和CSS实现进度条。

1. HTML代码

首先，我们需要添加一个文件上传控件和一个显示进度条的DIV，如下所示：

<input type="file" id="fileUpload" />
<div id="progress" style="width: 0%;"></div>

2. JavaScript代码

然后，我们需要使用JavaScript实现文件上传和进度条。我们可以使用XMLHttpRequest对象和FormData对象来异步上传文件，同时使用setInterval函数来更新进度条。

$(function () {
    $("#fileUpload").change(function () {
        var file = this.files[0];
        var formData = new FormData();
        formData.append("file", file);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (e) {
            if (e.lengthComputable) {
                var progress = Math.round((e.loaded / e.total) * 100);
                $("#progress").css("width", progress + "%");
            }
        }, false);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //上传成功后的处理
            }
        };
        xhr.open("POST", "/UploadHandler.ashx");
        xhr.send(formData);
        setInterval(function () {
            xhr.upload.addEventListener("progress", function (e) {
                if (e.lengthComputable) {
                    var progress = Math.round((e.loaded / e.total) * 100);
                    $("#progress").css("width", progress + "%");
                }
            }, false);
        }, 1000);
    });
});

3. CSS代码

最后，我们需要使用CSS代码来美化进度条。以下是一个简单的CSS代码示例：

#progress {
    background-color: #eee;
    height: 20px;
    border-radius: 5px;
}
#progress:after {
    content: "";
    display: block;
    background-color: #4caf50;
    height: 20px;
    border-radius: 5px;
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
}

通过将文件上传和进度条结合起来，我们可以在ASP.NET中实现无刷新文件上传并显示进度条，为用户提供更加良好的交互体验。

在ASP.NET中，实现无刷新文件上传并显示进度条可以通过以下步骤实现。

1.在页面上添加一个文件上传控件和一个提交按钮，如下所示：

<form id="form1" runat="server">
    <input type="file" id="fileUpload" />
    <input type="button" id="btnUpload" value="上传" onclick="uploadFile()" />
</form>
<div id="progress"></div>

2.使用JavaScript来实现文件上传的AJAX请求和进度条的更新。

function uploadFile() {
    var fileInput = document.getElementById("fileUpload");
    var file = fileInput.files[0];
    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    formData.append("file", file);
    xhr.upload.addEventListener("progress", updateProgress);
    xhr.open("POST", "upload.aspx", true);
    xhr.send(formData);
}

function updateProgress(event) {
    var progressBar = document.getElementById("progress");
    if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total * 100;
        progressBar.innerText = "上传进度：" + percentComplete.toFixed(2) + "%";
    } else {
        progressBar.innerText = "上传中...";
    }
}

3.在服务器端处理文件上传请求，保存文件并返回上传状态。

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Files.Count > 0)
    {
        try
        {
            HttpPostedFile file = Request.Files[0];
            string fileName = Path.GetFileName(file.FileName);
            string filePath = Server.MapPath("~/upload/" + fileName);
            file.SaveAs(filePath);
            Response.Write("上传成功");
        }
        catch (Exception ex)
        {
            Response.Write("上传失败：" + ex.Message);
        }
    }
    else
    {
        Response.Write("请选择要上传的文件");
    }
    Response.End();
}

通过以上步骤，即可实现无刷新文件上传并显示进度条。需要注意的是，该方法并非使用服务器控件来实现，而是通过原生的JavaScript和ASP.NET的文件上传API来实现。