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

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

猜你喜欢