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

目录
相关文章
|
28天前
|
开发框架 .NET 物联网
.NET从入门到精通,零基础也能搞定的基础知识教程
.NET从入门到精通,零基础也能搞定的基础知识教程
20 0
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
57 0
|
4月前
|
定位技术 C#
.NET微信网页开发相关文章教程
.NET微信网页开发相关文章教程
|
4月前
|
XML 数据可视化 数据库
VB.NET—DataGridView控件教程详解
VB.NET—DataGridView控件教程详解
136 0
|
6月前
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
23 0
|
6月前
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
35 0
|
8月前
|
存储 开发框架 .NET
ASP.NET Core SignalR系列之Hub教程
ASP.NET Core SignalR系列之Hub教程
102 0
|
8月前
|
SQL 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(完:内附源码)
经过一段时间的准备,【ASP.NET Core MVC开发实战之商城系统】已经完成,目前代码已开发完成,先将全部内容整理分享,如有不足之处,还请指正。
106 0
|
8月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(六)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情,购物车等功能的开发,今天继续讲解订单管理功能开发,仅供学习分享使用,如有不足之处,还请指正。
214 0