asp.net文件上传系统

这篇博客介绍了如何在ASP.NET中实现大文件的上传和下载。通过自定义控件和分片并发上传,提高了大文件上传的速度,并在上传失败时只需重传错误分片。同时,详细阐述了文件存储路径的配置、数据库的设置,以及前端Vue组件的使用。此外,还展示了下载功能的实现,包括多文件选择、设置下载目录以及下载进度的跟踪。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了。我这里分享一下我自己开发的一套大文件上传控件供大家参考

项目截图

说明: https://i-blog.csdnimg.cn/blog_migrate/bd0919ce99ed8007b3f32093b9dd38eb.png

 

路径配置

说明: https://i-blog.csdnimg.cn/blog_migrate/66790df4a59f69882c23325034a1d6cd.png

 

将localhost:8888/全部替换为实际项目路径

说明: https://i-blog.csdnimg.cn/blog_migrate/10635be634e72dcea6c3759bc3655dc3.png

 

数据库配置,

SQL2005

1.创建数据表和存储过程

说明: https://i-blog.csdnimg.cn/blog_migrate/96e5fbd26bc03fd953c83874fe31d8d3.png

创建后可以在数据库中看到创建好的数据表

说明: https://i-blog.csdnimg.cn/blog_migrate/a6bcc1ab92ae061b7933ca5525f90c61.png

 

2.修改数据库帐号和密码

Web.config

说明: https://i-blog.csdnimg.cn/blog_migrate/98931643ee0e5ff39344354a557fa927.png

connectionStrings

说明: https://i-blog.csdnimg.cn/blog_migrate/e2e91a8ec6e9d9928e6e0da1a90ea032.png

说明: http://bbsres2.ncmem.com/5d73366e.jpg

 

3.修改配置地址

注意

1.端口号必须正确,路径必须正确。

2.在局域网测试时需要将localhost改为服务器的IP地址。

  比如测试地址:oa.qq.com

  UrlPost:http://oa.qq.com/db/f_post.aspx

3.在外网测试时需要将localhost改为外网地址。

说明: https://i-blog.csdnimg.cn/blog_migrate/c2fae5e2159ef9b85a5e5d45ad3f1a5f.png

 

这是前端代码:

<body>

    <div id="app">

  {{ message }}

          <http-uploader6></http-uploader6>

    </div>

    <script type="text/javascript">

        // 定义一个名为 button-counter 的新组件

        Vue.component('http-uploader6', {

            data() {

                return {

                    upApp: null

                }

            },

            mounted() {

                //初始化up6

                const _this = this;

                this.upApp = new HttpUploaderMgr();

                this.upApp.load_to("up6-div");

            },

            destoryed() {

                //this.editor.destory();

            },

            methods: {

                open_file: function () { this.upApp.openFile(); }

                , open_folder: function () { this.upApp.openFolder(); }

            },

            template: '<div id="up6-div"></div>'

        });

 

        var app = new Vue({

            el: '#app',

            data: {

                message: '演示up6如何在vue中使用'

            }

        });

    </script>

</body>

 

这是后台存储部分代码:

using System.Web;

using up6.db.model;

 

namespace up6.db.biz

{

    /// <summary>

    /// 路径生成器基类

    /// 提供文件或文件夹的存储路径

    /// </summary>

    public class PathBuilder

    {

        /// <summary>

        /// 根级存储路径,

        /// </summary>

        /// <returns></returns>

        public string getRoot()

        {

            return HttpContext.Current.Server.MapPath("/upload");

        }

 

        public virtual string genFolder(ref FileInf fd)

        {

            return string.Empty;

        }

 

        public virtual string genFile(int uid, ref FileInf f)

        {

            return string.Empty;

        }

        public virtual string genFile(int uid, string md5, string nameLoc)

        {

            return string.Empty;

        }

    }

}

文件批量上传

分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。我们随机上传4个文件或文件夹

 

当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。如下图:

当重新打开网页时,只需要点击继续即可。

 

 上传完成后,我们发现页面上已出现相应的文件或文件夹名称

查看我们的数据库会发现已经新建了当天的日期文件夹,点击查看

 

会发现随机生成的4个文件夹并存放,打开发现确认是我们上传的原文件或文件夹

  

 

至此上传测试成功,当然有了上传自然也离不开下载。

 

勾选多个上传的文件或文件夹,你会发现多了一个下载按钮

然后点击下载按钮,设置下载目录文件夹

我设置的是桌面的测试下载目录,设置好点击确定后,继续点击下载按钮,你会发现在页面的右下角出现了下载面板,你选择的文件已出现在目录中,然后点击全部下载,或者单个点击继续

下载完成后打开我们设置的下载目录文件夹,发现需下载的文件或文件夹确认已下载成功,文件夹内的内容与下载文件夹内容一致

数据库记录

说明: https://i-blog.csdnimg.cn/blog_migrate/b73770e224f5411e6afd7660605e39a4.png

产品介绍官网:https://dwz.cn/fgXtRtnu

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值