ASP.NET Core3.1实战教程---基于Jquery单文件上传

简介: ASP.NET Core3.1实战教程---基于Jquery单文件上传

这个必须记录一下费劲啊!废了我2天的时间,昔日的net快速已经没落....就文件上传都这么费劲。

先说下要求(在线apk文件上传实现手机端整包更新):

1、为了简化需求文件上传和数据提交分开执行

2、选完文件后按钮变成上传

3、文件存储到项目根目录www下面

目前没做那么的现在如大小、文件类型等,看看UI

按钮发生了变化

文件上传成功

不废话了直接代码:

html代码,将上传控件做了个透明,目的是不显示难看的上传控件同时也是多浏览器显示一样。

<div class="form-group">
                                <label class="col-sm-3 control-label">附件<span class="red_blod">*</span></label>
                                <div class="col-sm-7">
                                    <input id="FILE_PATH" name="FILE_PATH" class="form-control" type="text">
                                    <!-- 给这个input 设置样式隐藏,切忌不可用display控制隐藏,可能不能跨浏览器 -->
                                    <input type="file" id="file" name="file" onchange="getFilePath()"
                                           style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;" />
                                </div>
                                <div class="col-sm-1">
                                    <button class="btn btn-primary" type="button" id="btnChooseFile">选择</button>
                                </div>
                            </div>

JS代码:

赋值操作将上传控件的值赋给txt控件

function getFilePath() {
    $("#FILE_PATH").val($("#file").val())
}

按钮状态切换和上传附件功能,灭有使用我封装加密的ajax,数据流就不加密了、成功和错误用了下封装的toast, 大家自己改一下就好了。

$("#btnChooseFile").click(function () {
        let button = $("#btnChooseFile")
        if (button.text() == "选择") {
            $("#file").trigger("click");
            $("#btnChooseFile").text("上传")
        } else {
            var fileUpload = $("#file").get(0);
            var files = fileUpload.files;
            var data = new FormData();
            for (var i = 0; i < files.length; i++) {
                data.append(files[i].name, files[i]);
            }
            //AjaxUploadFile
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "../../../App/AjaxUploadFile",//url
                data: data,
                contentType: false,
                processData: false,
                success: function (result) {
                    if (result.success == "true") {
                        $.showSuccessToast(result.message);
                    } else {
                        $.showErrorToast(result.message);
                    }
                },
                error: function () {
                    $.showErrorToast("连接服务器失败!请重试或者重新登录!");
                }
            });
        }
    });

重点来了,asp.net core 3.1 的后台代码。核心是IWebHostEnvironment的注入,人家需要放到构造函数而不是controller里,我给搞错了费劲啊看下构造

private IWebHostEnvironment Environment;
        public AppController(IWebHostEnvironment _environment)
        {
            Environment = _environment;
        }

在看一下上传文件,返回的Json我做了个封装,您们自己改一下吧。

public JsonResult AjaxUploadFile()
        {
            try { 
            if (Request.Form.Files.Count > 0)
            {
                var files = Request.Form.Files;
                foreach (var file in files)
                {
                    var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                    string filePath = Environment.WebRootPath + $@"\upload\admin\app\";
                    if (!Directory.Exists(filePath))
                    {
                        Directory.CreateDirectory(filePath);
                    }
                    fileName = Guid.NewGuid() + "." + fileName.Split('.')[1];
                    string fileFullName = filePath + fileName;
                    using (var stream = new FileStream(fileFullName, FileMode.Create))
                    {
                        file.CopyTo(stream);
                    }
                }
                }
            }
            catch (Exception ex) { return JsonResultError(ex.Message); }
            return JsonResultRight("文件上传成功!");
        }

好了搞定了 回忆一下其实也不难 ,可能是我js和Python写多了写高级语言有点梦游吧,写个文字记录一下也给爱好者提个醒。

目录
相关文章
|
开发框架 前端开发 JavaScript
ASP.NET Web Pages - 教程
ASP.NET Web Pages 是一种用于创建动态网页的开发模式,采用HTML、CSS、JavaScript 和服务器脚本。本教程聚焦于Web Pages,介绍如何使用Razor语法结合服务器端代码与前端技术,以及利用WebMatrix工具进行开发。适合初学者入门ASP.NET。
|
9月前
|
数据采集 自然语言处理 Java
Playwright 多语言一体化——Python/Java/.NET 全栈采集实战
本文以反面教材形式,剖析了在使用 Playwright 爬取懂车帝车友圈问答数据时常见的配置错误(如未设置代理、Cookie 和 User-Agent),并提供了 Python、Java 和 .NET 三种语言的修复代码示例。通过错误示例 → 问题剖析 → 修复过程 → 总结教训的完整流程,帮助读者掌握如何正确配置爬虫代理及其它必要参数,避免 IP 封禁和反爬检测,实现高效数据采集与分析。
593 3
Playwright 多语言一体化——Python/Java/.NET 全栈采集实战
|
开发框架 搜索推荐 算法
一个包含了 50+ C#/.NET编程技巧实战练习教程
一个包含了 50+ C#/.NET编程技巧实战练习教程
426 18
|
缓存 算法 安全
精选10款C#/.NET开发必备类库(含使用教程),工作效率提升利器!
精选10款C#/.NET开发必备类库(含使用教程),工作效率提升利器!
541 12
|
开发框架 NoSQL MongoDB
C#/.NET/.NET Core开发实战教程集合
C#/.NET/.NET Core开发实战教程集合
280 1
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
299 7
|
消息中间件 开发框架 .NET
.NET 8 强大功能 IHostedService 与 BackgroundService 实战
【11月更文挑战第7天】本文介绍了 ASP.NET Core 中的 `IHostedService` 和 `BackgroundService` 接口及其用途。`IHostedService` 定义了 `StartAsync` 和 `StopAsync` 方法,用于在应用启动和停止时执行异步操作,适用于资源初始化和清理等任务。`BackgroundService` 是 `IHostedService` 的抽象实现,简化了后台任务的编写,通过 `ExecuteAsync` 方法实现长时间运行的任务逻辑。文章还提供了创建和注册这两个服务的实战步骤,帮助开发者在实际项目中应用这些功能。
695 0
|
测试技术 API 开发者
.NET单元测试框架大比拼:MSTest、xUnit与NUnit的实战较量与选择指南
【8月更文挑战第28天】单元测试是软件开发中不可或缺的一环,它能够确保代码的质量和稳定性。在.NET生态系统中,MSTest、xUnit和NUnit是最为流行的单元测试框架。本文将对这三种测试框架进行全面解析,并通过示例代码展示它们的基本用法和特点。
1796 8
|
SQL 关系型数据库 数据库
七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)
七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)
387 2
|
开发框架 缓存 前端开发
实战.NET Framework 迁移到 .NET 5/6
从.NET Framework 迁移到.NET 5/6 是一次重要的技术革新,涵盖开发环境与应用架构的全面升级。本文通过具体案例详细解析迁移流程,包括评估现有应用、利用.NET Portability Analyzer 工具识别可移植代码、创建新项目、逐步迁移代码及处理依赖项更新等关键步骤。特别关注命名空间调整、JSON 序列化工具更换及数据库访问层重构等内容,旨在帮助开发者掌握最佳实践,确保迁移过程平稳高效,同时提升应用性能与可维护性。
461 2

相关课程

更多