asp.net core多文件分块同时上传组件使用详解

 更新时间:2023年12月11日 14:19:24   作者:IWing  
这篇文章主要为大家介绍了一个可多个文件同时上传、断点续传,并实时反馈上传进度的 Asp.Net core 组件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

服务器端

引用 nuget 包:JMS.FileUploader.AspNetCore

然后启用上传组件:

            app.UseAuthorization();
            app.MapControllers();
             //启用上传组件,并限制单个文件最大100M
            app.UseJmsFileUploader(1024*102400);
            app.Run();

在 Controller 里面,写个 Test 函数,处理上传的文件:

    [ApiController]
    [Route("[controller]/[action]")]
    public class MainController : ControllerBase
    {
        [HttpPost]
        public string Test([FromBody] object body)
        {
            var customHeader = Request.Headers["Custom-Header"];
            //临时文件路径
            var filepaths = Request.Headers["FilePath"];
            //文件名
            var filenames = Request.Headers["Name"];
            return filenames;
        }
    }

文件上传完毕,保存在临时文件中,Request.Headers["FilePath"] 可以读取这些文件的路径,如果确定要保留这些文件,用 File.Move 把它们移到你的目标文件夹当中;

Request.Headers["Name"] 则是读取文件名。

前端

引入 jms-uploader 组件:

      import JmsUploader from "jms-uploader"

html 元素:

    <input id="file1" multiple type="file" />
    <input id="file2" multiple type="file" />
    <button onclick="upload()">
        upload
    </button>
    <div id="info"></div>

javascript 脚本:

    async function upload() {
        //自定义请求头
        var headers = function () {
            return { "Custom-Header": "test" };
        };

        //提交的body
        var dataBody = {
            name: "abc"
        };

        var uploader = new JmsUploader("http://localhost:5200/main/test", [document.querySelector("#file1").files, document.querySelector("#file2").files], headers, dataBody);

        uploader.setPartSize(1024);//设置分块大小,默认是102400

        uploader.onUploading = function (percent, uploadedSize, totalSize) {
            document.querySelector("#info").innerHTML = percent + "% " + uploadedSize + "," + totalSize;
        };

        var ret = await uploader.upload();
        //上传完毕
        alert(ret);
    }

组件源码地址 https://github.com/simpleway2016/JMS.FileUploader

以上就是asp.net core多文件分块同时上传组件使用详解的详细内容,更多关于asp.net core多文件分块上传的资料请关注脚本之家其它相关文章!

相关文章

  • asp.net网站实现接入QQ登录示例代码

    asp.net网站实现接入QQ登录示例代码

    相信大家在做开发的时候,常会遇到集成QQ登录的功能,本文主要说的是利用asp.net代码的实现方式,逻辑部分主要还是根据帮助文档来的。不懂的同学可以先看看文档。下面来一起学习学习。
    2016-08-08
  • ASP.NET数据库编程之处理文件访问许可

    ASP.NET数据库编程之处理文件访问许可

    ASP.NET数据库编程之处理文件访问许可...
    2006-09-09
  • FileUpload使用Javascript检查扩展名是否有效实现思路

    FileUpload使用Javascript检查扩展名是否有效实现思路

    在JavaScript获取FileUpload控件的文件路径,并取得路径中的文件扩展名,再与阵列中的扩展名比较,如果存在,说明上传的文件是有效的,反之无效,感兴趣的朋友可以了解下,或许对你有所帮助
    2013-02-02
  • ASP.NET简化编辑界面解决思路及实现代码(2)

    ASP.NET简化编辑界面解决思路及实现代码(2)

    这篇与前一篇改进部分,也许大家会留意到动画演示,主要是GridVeiw的更新与删除会在每row都有。因此Insus.NET把它抽取出来,放在GridView外,感兴趣的朋友可以了解下啊,希望本文对你有所帮助
    2013-01-01
  • Asp.Net实现的通用分页函数

    Asp.Net实现的通用分页函数

    这篇文章主要介绍了Asp.Net实现的通用分页函数,结合实例形势分析了asp.net分页函数的功能,定义及使用技巧,需要的朋友可以参考下
    2016-04-04
  • .NET中字符串比较的最佳用法

    .NET中字符串比较的最佳用法

    本文详细讲解了.NET中字符串比较的最佳用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-02-02
  • ASP.NET MVC3的伪静态实现代码

    ASP.NET MVC3的伪静态实现代码

    最近使用asp.net MVC3开发B2C电子商务系统,为了SEO的优化工作,需要通过路由实现伪静态URL,后续再根据需要生成真正的静态页面,不直接走路由访问具体的页面
    2011-12-12
  • Asp.net简单实现给图片增加文字水印

    Asp.net简单实现给图片增加文字水印

    这篇文章主要介绍了Asp.net简单实现给图片增加文字水印,需要的朋友可以参考下
    2014-12-12
  • asp.net Menu控件+SQLServer实现动态多级菜单

    asp.net Menu控件+SQLServer实现动态多级菜单

    asp.net Menu控件+SQLServer实现动态多级菜单的代码,需要的朋友可以参考下。
    2011-12-12
  • asp.C#实现图片文件与base64string编码解码

    asp.C#实现图片文件与base64string编码解码

    前些天在opera论坛里面当了个flashblocker脚本文件,顾名思义,就是把网页中的flash给过滤了,过滤之后呢就会在原位置显示一张图片,以前用firefox时的flash过滤插件也是这样,而且显示的图片也一样,一样的难看,于是就想换换它。
    2010-03-03

最新评论