Junhong_c 2024-12-16 12:09 采纳率: 0%
浏览 8

C# 网页使用FileUpload1控件上传文件， 如何使用ScriptManager及UpdatePanel 读取文件后可以局部刷新使用进度条

C# 网页上传电子表格文件并读取数据内容，可以使用进度条或提示条吗？

以前使用window form可以使用进度条来显示上传文件及数据的进度，现在需要用web form来替换window form来实现上传文件及更新数据的进度。

使用ScriptManager及UpdatePanel 可以局部刷新使用进度条，但却无法同时获取要上传文件的文件名，FileUpload1 控件可能是要传递整页数据，造成两个控件同时使用达不到效果。 有什么办法可以得到这种效果吗？即能上传文件并读取文件数据，还能显示进度情况，让用户比较好的体验吗

<asp:FileUpload ID="FileUpload1" runat="server" />

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script type="text/javascript" language="javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        var elem = args.get_postBackElement();
        ActivateAlertDiv('visible', 'AlertDiv', elem.value + ' processing...');
    }
    function EndRequestHandler(sender, args) {
        ActivateAlertDiv('hidden', 'AlertDiv', '');
    }
    function ActivateAlertDiv(visstring, elem, msg) {
        var adiv = $get(elem);
        adiv.style.visibility = visstring;
        adiv.innerHTML = msg;
    }
</script>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server" >
<ContentTemplate>
        <asp:Button ID="Btn_Process" runat="server" Text="Upload"  Onclick="UploadClick_Handler"/>
</ContentTemplate>
<Triggers>
    <asp:PostBackTrigger ControlID="Btn_Process"   />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
    <div id="AlertDiv" class="AlertStyle"></div>
</ProgressTemplate>
</asp:UpdateProgress>
  • 写回答

1条回答 默认 最新

  • 道友老李 JWE233286一种基于机器视觉的水表指针读数识别及修正的方法 专利发明者 2024-12-16 12:13
    关注
    让【道友老李】来帮你解答，本回答参考通义千问qwen-plus编写，并整理提供，如果还有疑问可以点击头像关注，评论或留言
    要在ASP.NET Web Forms中实现文件上传并显示进度条，确实需要一些技巧，因为传统的`FileUpload`控件和`UpdatePanel`结合时会有一些限制。以下是一个解决方案，通过使用HTML5的`FormData`和`XMLHttpRequest`来实现文件上传并显示进度条。

    解决方案概述

    1. 前端部分：使用HTML5的FormData对象和XMLHttpRequest来发送文件，并在发送过程中监听进度事件。
    2. 后端部分：使用C#处理文件上传请求，并返回响应。

    前端代码

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>File Upload with Progress Bar</title>
    <style>
        #progressBar {
            width: 100%;
            background-color: #f3f3f3;
        }
        #progressBar div {
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: white;
            background-color: #4caf50;
            width: 0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="file" id="fileInput" />
            <button id="uploadButton">Upload</button>
            <div id="progressBar">
                <div id="progress"></div>
            </div>
        </div>
    </form>

    <script type="text/javascript">
        document.getElementById('uploadButton').addEventListener('click', function (e) {
            e.preventDefault();

            var fileInput = document.getElementById('fileInput');
            var file = fileInput.files[0];
            if (!file) {
                alert('Please select a file');
                return;
            }

            var formData = new FormData();
            formData.append('file', file);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'UploadHandler.ashx', true);

            xhr.upload.onprogress = function (event) {
                if (event.lengthComputable) {
                    var percentComplete = (event.loaded / event.total) * 100;
                    document.getElementById('progress').style.width = percentComplete + '%';
                    document.getElementById('progress').innerHTML = Math.round(percentComplete) + '%';
                }
            };

            xhr.onload = function () {
                if (xhr.status === 200) {
                    alert('File uploaded successfully');
                } else {
                    alert('Error uploading file');
                }
            };

            xhr.send(formData);
        });
    </script>
</body>
</html>

    后端代码

    创建一个HTTP处理程序（.ashx文件）来处理文件上传请求。

    using System;
using System.IO;
using System.Web;

public class UploadHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        if (context.Request.Files.Count > 0)
        {
            HttpPostedFile file = context.Request.Files[0];
            string filePath = context.Server.MapPath("~/Uploads/" + file.FileName);

            // Save the file
            file.SaveAs(filePath);

            context.Response.Write("File uploaded successfully");
        }
        else
        {
            context.Response.Write("No file uploaded");
        }
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

    说明

    1. 前端部分：

      • 使用<input type="file" id="fileInput" />来选择文件。
      • 使用<button id="uploadButton">Upload</button>来触发上传操作。
      • 使用<div id="progressBar"><div id="progress"></div></div>来显示进度条。
      • JavaScript代码中，使用FormData对象来封装文件数据，并使用XMLHttpRequest对象来发送POST请求。通过监听onprogress事件来更新进度条。

    2. 后端部分：

      • 创建一个HTTP处理程序（UploadHandler.ashx），在ProcessRequest方法中处理文件上传请求。
      • 将上传的文件保存到服务器上的指定目录，并返回成功或失败的响应。

    注意事项

    • 确保服务器上有足够的权限来写入文件。
    • 处理大文件时，考虑增加超时时间。
    • 可以根据需要添加更多的错误处理和日志记录。

    通过这种方式，你可以在ASP.NET Web Forms中实现文件上传并显示进度条，提供更好的用户体验。

    评论

报告相同问题？

  • asp.net fileupload控件上传文件与多文件上传
    2020-10-25 04:26
    在***开发中，文件上传是常见的功能之一，通过fileupload控件，开发者可以实现用户界面上传文件到服务器端的逻辑。本篇文档详细介绍了fileupload控件的基本用法，如何进行单文件上传以及如何实现多文件上传，以及...
  • 【ASP.NET编程知识】asp.net fileupload控件上传文件与多文件上传.docx
    2023-05-15 02:21
    ASP.NET中的FileUpload控件是用于用户在网页上选择并上传文件到服务器的关键组件。它在ASP.NET编程中扮演着重要角色，特别是在处理用户需要提交本地文件到服务器的应用场景下，如图片上传、文档共享等。 在提供的...
  • 【ASP.NET编程知识】asp.net单文件带进度条上传的解决方案.docx
    2023-05-18 14:19
    本文主要讲述了ASP.NET单文件带进度条上传的解决方案，通过使用jquery框架和ASP.NET缓存机制，实现了文件上传和进度条显示的功能。 知识点1：使用jquery框架实现文件上传 在本文中，我们使用jquery框架来实现文件...
  • 基于fileUpload文件上传带进度条效果的实例(必看)
    2020-12-09 01:52
    在本文中，我们将探讨如何创建一个基于`fileUpload`的文件上传功能，同时提供一个进度条来显示上传进度。这个实例对于改善用户体验至关重要，尤其是在处理大文件上传时，用户能够实时看到进度，增加了操作的透明度和...
  • ASP.NET中FileUpload文件上传控件应用实例
    2021-01-21 19:29
    使用 FileUpload 控件，可以为用户提供一种将文件从用户的计算机发送到服务器的方法。该控件在允许用户上载图片、文本文件或其他文件时很有用。要上载的文件将在回发期间作为浏览器请求的一部分提交给服务器。在文件...
  • c#.net 网页 文件上传进度条fileupload
    2010-06-21 15:43
    c#.net 文件 上传 进度条 fileuploadc#.net 文件 上传 进度条 fileuploadc#.net 文件 上传 进度条 fileuploadc#.net 文件 上传 进度条 fileupload
  • asp.net FileUpload控件实现文件格式判断与文件大小限制
    2020-10-25 04:27
    使用FileUpload控件的PostedFile.ContentLength属性，可以获取上传文件的大小（以字节为单位）。通过比较两者，可以判断上传的文件是否超出了设定的大小限制。 以下是一个用于判断文件大小是否合适的示例方法： ...
  • .net使用FileUpLoad控件上传文件
    2009-09-07 21:39
    为了实现单个文件的上传功能，首先需要在网页上放置一个 `FileUpload` 控件和一个 `Button` 控件，用户通过 `FileUpload` 选择文件，点击按钮后触发上传操作。 ```csharp <asp:FileUpload ID="FileUpload1" runat=...
  • 使用()控件的saveas方法可以将上传文件保存到服务器.,NET开发-FileUpload上传控件HasFile、FileName、SaveAs()的使用...
    2021-08-09 04:10
    吴天干的博客 FileUpload控件概述在ASP.NET WebForm的标准控件中，可以使用FileUpload控件实现客户端文件(任意类型的文件)的上传，上传后的文件会发送到服务器上并存储。例如：朋友圈上的头像，就需要每个用户上传自己的头像，...
  • C# Web服务器控件FileUpload（）上传文件
    2019-08-27 11:49
    Elen005的博客 在C# ASP.NET Web中，使用FileUpload控件可以实现上传文件，即把客户机的某个文件上传到服务器的某个目录下。在此我只写一个简单的实例供参考。 FileUpload.aspx文件如下： <%@ Page Language="C#" ...
  • net使用FileUpLoad控件上传文件.
    2008-09-13 21:07
    ### .NET 使用 FileUpload 控件上传文件 在 Web 开发中，经常需要处理用户上传的文件，例如图片、文档等。.NET 框架提供了一个非常方便的控件——`FileUpload`，用于实现文件的上传功能。下面将详细介绍如何在 ASP...
  • fileupload插件 上传文件自带进度条
    2018-01-12 10:40
    在使用fileupload插件时，你可以设置文件格式限制，例如只允许用户上传特定类型的文件，如.jpg、.png、.docx等，这有助于确保上传的数据符合预期，避免了不兼容或不安全的文件类型。同时，还可以设定文件大小限制，...
  • 商业编程-源码-Anthem.NET中FileUpload控件Ajax方式的文件上传.zip
    2022-06-20 17:23
    本压缩包中的内容主要关注Anthem.NET库中FileUpload控件实现的Ajax文件上传功能，这是一种无需刷新整个页面就能完成文件上传的技术，极大地提升了用户体验。 首先，我们要理解Ajax（Asynchronous JavaScript and ...
  • jQueryFileUpload文件上传控件支持多个文件选择拖放支持进度条
    2019-08-10 02:21
    文件上传控件支持多个文件选择，拖放支持，进度条，验证和预览图像，音频和视频的jQuery插件。支持跨域，分块和可恢复的文件上传。支持标准的HTML表单文件上传和任何服务器端平台（谷歌应用程序引擎，PHP，Python和...
  • jquery-file-upload 文件上传带进度条效果
    2020-10-18 23:33
    jQuery File Upload 是一款功能强大的基于 jQuery 的文件上传插件，它允许用户实现多文件上传、取消上传、删除已上传文件等功能。此插件的一个显著特点就是支持上传进度条的显示，为用户提供直观的上传状态反馈。在...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 12月16日