{"id":1041,"date":"2023-04-27T11:34:53","date_gmt":"2023-04-27T11:34:53","guid":{"rendered":"https:\/\/dijix.com.ua\/blog\/?p=1041"},"modified":"2023-04-27T11:34:53","modified_gmt":"2023-04-27T11:34:53","slug":"zagruzka-fajla-s-pomoshhyu-ajax-v-asp-net-core","status":"publish","type":"post","link":"https:\/\/dijix.com.ua\/blog\/uk\/zagruzka-fajla-s-pomoshhyu-ajax-v-asp-net-core\/","title":{"rendered":"\u0417\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f \u0444\u0430\u0439\u043b\u0443 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e Ajax \u0432 Asp.Net Core"},"content":{"rendered":"

\u0429\u043e\u0431 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0438\u0442\u0438 \u0444\u0430\u0439\u043b \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e Ajax \u0443 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443 Asp.Net Core, \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0443 jQuery \u0434\u043b\u044f \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u0437\u0430\u043f\u0438\u0442\u0443 \u0442\u0430 \u043c\u0430\u043d\u0456\u043f\u0443\u043b\u044e\u0432\u0430\u043d\u043d\u044f DOM.<\/p>\n

\u041e\u0441\u044c \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0438 \u0442\u043e\u0433\u043e, \u044f\u043a \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0438\u0442\u0438 \u0444\u0430\u0439\u043b \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e Ajax \u0443 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443 Asp.Net Core:<\/p>\n

\u041d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0444\u0430\u0439\u043b\u0443 \u0437 \u0431\u043e\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/h2>\n
    \n
  1. \u0414\u043e\u0434\u0430\u0439\u0442\u0435 \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0443 jQuery<\/strong> \u0443 \u0441\u0432\u0456\u0439 \u043f\u0440\u043e\u0454\u043a\u0442. \u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0438\u0442\u0438 \u0457\u0457 \u0437 \u0441\u0430\u0439\u0442\u0443 jQuery \u0430\u0431\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 CDN. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0449\u043e\u0431 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 CDN, \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0438\u0439 \u0440\u044f\u0434\u043e\u043a \u0443 \u0444\u0430\u0439\u043b _Layout.cshtml<\/strong>:<\/li>\n<\/ol>\n
    <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n<\/pre>\n
    2. \u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u0434\u0456\u044e \u0443 \u0432\u0430\u0448\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u0440\u0456, \u044f\u043a\u0430 \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u0454 \u0432\u043c\u0456\u0441\u0442 \u0444\u0430\u0439\u043b\u0443 \u0443 \u0432\u0438\u0433\u043b\u044f\u0434\u0456 \u0440\u044f\u0434\u043a\u0430. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434:<\/p>\n
    [HttpGet]\r\npublic string GetFileContent()\r\n{\r\n    string filePath = Path.Combine(_environment.WebRootPath, \"myfile.txt\");\r\n    return System.IO.File.ReadAllText(filePath);\r\n}\r\n<\/pre>\n
    \u0423 \u0446\u044c\u043e\u043c\u0443 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0456 \u0434\u0456\u044f \u0437\u0447\u0438\u0442\u0443\u0454 \u0432\u043c\u0456\u0441\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0443 \u0437 \u0456\u043c\u0435\u043d\u0435\u043c “myfile.txt<\/strong>“, \u0440\u043e\u0437\u043c\u0456\u0449\u0435\u043d\u043e\u0433\u043e \u0432 \u043f\u0430\u043f\u0446\u0456 wwwroot<\/strong> \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/p>\n
    3. \u0423 \u043f\u043e\u0434\u0430\u043d\u043d\u0456 \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u0430\u0431\u043e \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f, \u044f\u043a\u0435 \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0442\u0438\u043c\u0435 Ajax-\u0437\u0430\u043f\u0438\u0442. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434:<\/p>\n
    <button id=\"loadFileButton\">Load file<\/button>\r\n<div id=\"fileContent\"><\/div>\r\n<\/pre>\n
    \u0423 \u0446\u044c\u043e\u043c\u0443 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0456 \u0434\u043e\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0437 id “loadFileButton”, \u0430 \u0432\u043c\u0456\u0441\u0442 \u0444\u0430\u0439\u043b\u0443 \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u0438\u043c\u0435\u0442\u044c\u0441\u044f \u0432 div \u0437 id “fileContent”.<\/p>\n
    4. \u0414\u043e\u0434\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0438\u0439 \u043a\u043e\u0434 JavaScript \u0443 \u043f\u043e\u0434\u0430\u043d\u043d\u044f \u0430\u0431\u043e \u0432 \u043e\u043a\u0440\u0435\u043c\u0438\u0439 \u0444\u0430\u0439\u043b:<\/p>\n
    $(document).ready(function () {\r\n    $(\"#loadFileButton\").click(function () {\r\n        $.ajax({\r\n            type: \"GET\",\r\n            url: \"\/MyController\/GetFileContent\",\r\n            success: function (result) {\r\n                $(\"#fileContent\").text(result);\r\n            },\r\n            error: function (xhr, status, error) {\r\n                alert(\"Error: \" + error);\r\n            }\r\n        });\r\n    });\r\n});\r\n<\/pre>\n
    \u0423 \u0446\u044c\u043e\u043c\u0443 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0456 \u043e\u0431\u0440\u043e\u0431\u043b\u044f\u0454\u0442\u044c\u0441\u044f \u043f\u043e\u0434\u0456\u044f \u043d\u0430\u0442\u0438\u0441\u043a\u0430\u043d\u043d\u044f \u043a\u043d\u043e\u043f\u043a\u0438 “loadFileButton”, \u0456 Ajax-\u0437\u0430\u043f\u0438\u0442 \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u043b\u044f\u0454\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0456\u044e “GetFileContent” \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u0440\u0430 “MyController”. \u0423 \u0440\u0430\u0437\u0456 \u0443\u0441\u043f\u0456\u0448\u043d\u043e\u0433\u043e \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u0437\u0430\u043f\u0438\u0442\u0443 \u0432\u043c\u0456\u0441\u0442 \u0444\u0430\u0439\u043b\u0443 \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0430\u0454\u0442\u044c\u0441\u044f \u0432 div “fileContent”. \u0423 \u0440\u0430\u0437\u0456 \u0432\u0438\u043d\u0438\u043a\u043d\u0435\u043d\u043d\u044f \u043f\u043e\u043c\u0438\u043b\u043a\u0438 \u0432\u0438\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u0436\u0435\u043d\u043d\u044f \u0437 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f\u043c \u043f\u0440\u043e \u043f\u043e\u043c\u0438\u043b\u043a\u0443.<\/p>\n
    \u041e\u0441\u044c \u0456 \u0432\u0441\u0435! \u041f\u0456\u0434 \u0447\u0430\u0441 \u043d\u0430\u0442\u0438\u0441\u043a\u0430\u043d\u043d\u044f \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u043c\u0456\u0441\u0442 \u0444\u0430\u0439\u043b\u0443 \u0431\u0443\u0434\u0435 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043e \u0456 \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043e \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e Ajax.<\/p>\n
    \u041d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0444\u0430\u0439\u043b\u0443 \u0437 \u0431\u043e\u043a\u0443 \u043a\u043b\u0456\u0454\u043d\u0442\u0430<\/h2>\n
    \u0412\u043c\u0456\u0441\u0442 Index.cshtml<\/strong>:<\/p>\n
    <form id=\"form\" name=\"form\" action=\"\/uploader\" enctype=\"multipart\/form-data\" method=\"post\">\r\n  <div class=\"buttons\">\r\n    <div class=\"upload-button\">\r\n      <div class=\"label\">Click me!<\/div>\r\n      <input id=\"files\" name=\"files\" type=\"file\" size=\"1\" multiple onchange=\"uploadFiles('files');\" \/>\r\n    <\/div>\r\n  <\/div>\r\n<\/form><\/pre>\n
    JavaScript \u043a\u043e\u0434, \u0443 \u0442\u043e\u043c\u0443 \u0436 \u043f\u043e\u0434\u0430\u043d\u043d\u0456 \u0430\u0431\u043e \u0432 \u043e\u043a\u0440\u0435\u043c\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0456:<\/p>\n
    function uploadFiles(inputId) {\r\n  var input = document.getElementById(inputId);\r\n  var files = input.files;\r\n  var formData = new FormData();\r\n\r\n  for (var i = 0; i != files.length; i++) {\r\n    formData.append(\"files\", files[i]);\r\n  }\r\n\r\n  $.ajax(\r\n    {\r\n      url: \"\/uploader\",\r\n      data: formData,\r\n      processData: false,\r\n      contentType: false,\r\n      type: \"POST\",\r\n      success: function (data) {\r\n        alert(\"Files Uploaded!\");\r\n      }\r\n    }\r\n  );\r\n}<\/pre>\n
    \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u0440 MyController<\/strong>:<\/p>\n
    [HttpPost]\r\npublic async Task<IActionResult> Index(IList<IFormFile> files)\r\n{\r\n  foreach (IFormFile source in files)\r\n  {\r\n    string filename = ContentDispositionHeaderValue.Parse(source.ContentDisposition).FileName.Trim('\"');\r\n\r\n    filename = this.EnsureCorrectFilename(filename);\r\n\r\n    using (FileStream output = System.IO.File.Create(this.GetPathAndFilename(filename)))\r\n      await source.CopyToAsync(output);\r\n  }\r\n\r\n  return this.View();\r\n}\r\n\r\nprivate string EnsureCorrectFilename(string filename)\r\n{\r\n  if (filename.Contains(\"\\\"))\r\n    filename = filename.Substring(filename.LastIndexOf(\"\\\") + 1);\r\n\r\n  return filename;\r\n}\r\n\r\nprivate string GetPathAndFilename(string filename)\r\n{\r\n  return this.hostingEnvironment.WebRootPath + \"\\uploads\\\" + filename;\r\n}<\/pre>\n
    \n
    \n<\/blockquote>\n
    \u042f \u0441\u043f\u043e\u0434\u0456\u0432\u0430\u044e\u0441\u044f, \u0449\u043e \u0432\u0430\u043c \u0441\u043f\u043e\u0434\u043e\u0431\u0430\u043b\u043e\u0441\u044f \u0447\u0438\u0442\u0430\u0442\u0438 \u0446\u044e \u0441\u0442\u0430\u0442\u0442\u044e, \u0456 \u0432\u043e\u043d\u0430 \u0432\u0438\u044f\u0432\u0438\u043b\u0430\u0441\u044f \u043b\u0435\u0433\u043a\u043e\u044e \u0434\u043b\u044f \u0440\u043e\u0437\u0443\u043c\u0456\u043d\u043d\u044f. \u0411\u0443\u0434\u044c \u043b\u0430\u0441\u043a\u0430, \u0434\u0430\u0439\u0442\u0435 \u043c\u0435\u043d\u0456 \u0437\u043d\u0430\u0442\u0438, \u044f\u043a\u0449\u043e \u0443 \u0432\u0430\u0441 \u0454 \u044f\u043a\u0456\u0441\u044c \u043a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0456 \u0430\u0431\u043e \u0432\u0438\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044f.<\/p>\n
    \u0422\u0430\u043a \u0441\u0430\u043c\u043e \u0432\u0430\u043c \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0446\u0456\u043a\u0430\u0432\u0430 \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u044f \u0441\u0442\u0430\u0442\u0442\u044f – \u042f\u043a \u0437\u0440\u043e\u0431\u0438\u0442\u0438 \u0441\u043f\u043b\u0438\u0432\u0430\u044e\u0447\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u0435 \u0432\u0456\u043a\u043d\u043e \u0432 Asp.Ne<\/a>t.<\/p>\n
    \u0412\u0438 \u0445\u043e\u0447\u0435\u0442\u0435 \u043d\u0430\u0432\u0447\u0438\u0442\u0438\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u0438 \u043a\u043e\u0434 \u043c\u043e\u0432\u043e\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\u0432\u0430\u043d\u043d\u044f C#?<\/strong><\/h4>\n
    \u0421\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0440\u0456\u0437\u043d\u0456 \u0456\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0439\u043d\u0456 \u0441\u0438\u0441\u0442\u0435\u043c\u0438, \u0449\u043e \u0441\u043a\u043b\u0430\u0434\u0430\u044e\u0442\u044c\u0441\u044f \u0437 \u0441\u0430\u0439\u0442\u0456\u0432, \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u043a\u043b\u0456\u0454\u043d\u0442\u0456\u0432, \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0438\u0445 \u0434\u043e\u0434\u0430\u0442\u043a\u0456\u0432, \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442\u0456\u0432 \u0442\u043e\u0449\u043e.<\/p>\n
    \"\"<\/a><\/p>\n
    \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u044c\u0442\u0435 \u0434\u043e \u043d\u0430\u0441 \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 Dijix \u0456 \u043e\u0437\u043d\u0430\u0439\u043e\u043c\u0442\u0435\u0441\u044f \u0437 \u0443\u043c\u043e\u0432\u0430\u043c\u0438 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f, \u043c\u0438 \u0441\u043f\u0435\u0446\u0456\u0430\u043b\u0456\u0437\u0443\u0454\u043c\u043e\u0441\u044f \u0442\u0456\u043b\u044c\u043a\u0438 \u043d\u0430 \u0456\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u0438\u0445 \u0437\u0430\u043d\u044f\u0442\u0442\u044f\u0445, \u044f\u043a \u0434\u043b\u044f \u043f\u043e\u0447\u0430\u0442\u043a\u0456\u0432\u0446\u0456\u0432, \u0442\u0430\u043a \u0456 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0443\u043d\u0443\u0442\u0438\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0456\u0441\u0442\u0456\u0432. \u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0437\u044f\u0442\u0438 \u044f\u043a \u043e\u0434\u043d\u0435 \u0437\u0430\u043d\u044f\u0442\u0442\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0430\u0446\u044e\u0432\u0430\u043d\u043d\u044f \u043f\u0438\u0442\u0430\u043d\u043d\u044f, \u0449\u043e \u0432\u0430\u0441 \u0446\u0456\u043a\u0430\u0432\u0438\u0442\u044c, \u0442\u0430\u043a \u0456 \u043a\u0456\u043b\u044c\u043a\u0430, \u0434\u043b\u044f \u0431\u0456\u043b\u044c\u0448 \u0449\u0456\u043b\u044c\u043d\u043e\u0457 \u0440\u043e\u0431\u043e\u0442\u0438. \u0417\u0430\u0432\u0434\u044f\u043a\u0438 \u043e\u0441\u043e\u0431\u0438\u0441\u0442\u043e\u043c\u0443 \u043a\u0430\u0431\u0456\u043d\u0435\u0442\u0443, \u043a\u043e\u0436\u0435\u043d \u0441\u0442\u0443\u0434\u0435\u043d\u0442 \u043f\u0456\u0434\u0432\u0438\u0449\u0438\u0442\u044c \u044f\u043a\u0456\u0441\u0442\u044c \u0441\u0432\u043e\u0433\u043e \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f, \u0443 \u0432\u0430\u0448\u043e\u043c\u0443 \u0440\u043e\u0437\u043f\u043e\u0440\u044f\u0434\u0436\u0435\u043d\u043d\u0456:<\/p>\n