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写多了写高级语言有点梦游吧,写个文字记录一下也给爱好者提个醒。

目录
相关文章
|
24天前
|
开发框架 前端开发 JavaScript
ASP.NET Web Pages - 教程
ASP.NET Web Pages 是一种用于创建动态网页的开发模式,采用HTML、CSS、JavaScript 和服务器脚本。本教程聚焦于Web Pages,介绍如何使用Razor语法结合服务器端代码与前端技术,以及利用WebMatrix工具进行开发。适合初学者入门ASP.NET。
|
2月前
|
开发框架 NoSQL MongoDB
C#/.NET/.NET Core开发实战教程集合
C#/.NET/.NET Core开发实战教程集合
|
2月前
|
存储 NoSQL API
.NET NoSQL 嵌入式数据库 LiteDB 使用教程
.NET NoSQL 嵌入式数据库 LiteDB 使用教程~
|
3月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
51 7
|
3月前
|
SQL 关系型数据库 数据库
七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)
七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)
|
4月前
|
开发框架 .NET API
在IIS上部署ASP.NET Core Web API和Blazor Wasm详细教程
在IIS上部署ASP.NET Core Web API和Blazor Wasm详细教程
215 3
|
7月前
|
开发框架 .NET 物联网
.NET从入门到精通,零基础也能搞定的基础知识教程
.NET从入门到精通,零基础也能搞定的基础知识教程
167 0
|
7月前
|
开发框架 .NET 定位技术
asp.net core3.1 c# 生成三种sitemap
asp.net core3.1 c# 生成三种sitemap
41 0
|
10天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
48 21