C# Layui 文件上传前后端示例 - 完整代码和解析 - 常规

以下是一个使用 C# 和 layui 实现文件上传的前后端示例：\n\n前端代码（HTML）：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>文件上传示例</title>\n <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">\n</head>\n<body>\n <div class="layui-container">\n <div class="layui-row">\n <div class="layui-col-md6">\n <div class="layui-upload">\n <button type="button" class="layui-btn" id="uploadButton">选择文件</button>\n <input type="file" name="file" id="fileInput" style="display: none;">\n </div>\n </div>\n </div>\n </div>\n\n <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>\n <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>\n <script>\n layui.use(['layer', 'upload'], function(){\n var layer = layui.layer;\n var upload = layui.upload;\n\n // 文件上传\n upload.render({\n elem: '#uploadButton',\n url: '/upload',\n accept: 'file',\n done: function(res){\n if(res.code === 0){\n layer.msg('文件上传成功');\n }else{\n layer.msg('文件上传失败');\n }\n },\n error: function(){\n layer.msg('文件上传失败');\n }\n });\n });\n </script>\n</body>\n</html>\n\n\n后端代码（C#）：\n\ncsharp\nusing System;\nusing System.IO;\nusing System.Web;\nusing System.Web.Mvc;\n\npublic class UploadController : Controller\n{\n [HttpPost]\n public JsonResult Upload(HttpPostedFileBase file)\n {\n try\n {\n if (file != null && file.ContentLength > 0)\n {\n string fileName = Path.GetFileName(file.FileName);\n string filePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);\n file.SaveAs(filePath);\n\n return Json(new { code = 0, msg = "上传成功" });\n }else\n {\n return Json(new { code = -1, msg = "请选择文件" });\n }\n }catch (Exception ex)\n {\n return Json(new { code = -1, msg = ex.Message });\n }\n }\n}\n\n\n在上述示例中，前端使用 layui 的 upload 组件来实现文件选择和上传功能。后端使用 C# 的 ASP.NET MVC 框架来处理文件上传请求。在后端代码中，文件将被保存在服务器的 Uploads 文件夹中。上传成功后，前端将收到一个包含成功消息的 JSON 响应，否则将收到一个包含失败消息的 JSON 响应。