在 asp.net 核心客户端中使用 ajax 上传文件类型

Posted 2023-04-12

【中文标题】在 asp.net 核心客户端中使用 ajax 上传文件类型

【英文标题】：upload file type using ajax in asp.net core client

【发布时间】：2022-01-09 15:27:28

【问题描述】：

这是我的 html

<form enctype="multipart/form-data" class="needs-validation" id="formRequestLeave2">
     <div class="row form-group">
            <label class="col-md-4" for="File"><strong>Upload File</strong></label>
            <div class="col-md-7 form-control">
                 <input class="form-control custom-file-input" id="fileUpload" name="File" type="file" required>
                 <label class="custom-file-label">Choose File...</label>
            </div>
     </div>
</form>

这是我的 javascript

function Insert() 
    event.preventDefault();
    var obj = new Object();
    obj.EmployeeId = $("#employeeId2").val();
    obj.File = $("#fileUpload").val();
    manager = $("#managerName2").val()

    $.ajax(
        url: "/LeaveDetails/LeaveRequest",
        type: "POST",
        'data': obj,
)

这是我的控制器

public JsonResult LeaveRequest(LeaveRequestVM leaveRequestVM)
        
            
            string uniqueFileName = null;
            if (leaveRequestVM.File != null)
            
                string uploadsFolder = Path.Combine(hostingEnvironment.WebRootPath, "files");
                uniqueFileName = Guid.NewGuid().ToString() + "_" + leaveRequestVM.File.FileName;
                string filePath = Path.Combine(uploadsFolder, uniqueFileName);
                leaveRequestVM.File.CopyTo(new FileStream(filePath, FileMode.Create));
            
            leaveRequestVM.uniqueFileName = uniqueFileName;
          
            var result = repository.LeaveRequest(leaveRequestVM);
            return Json(result);
        

我尝试使用 ajax 从我的视图将文件类型输入发送到我的控制器，但结果为空 我一直在尝试使用

contentType: false,
processData: false

【问题讨论】：

这能回答你的问题吗？ How can I upload files asynchronously with jQuery?

【参考方案1】：

   <form id="frmproduct" method="post" asp-antiforgery="true" class="row gy-1 pt-75" onsubmit="return false">
  <span class="btn btn-primary btn-sm btn-file">
 <input type="file" name="Image">
 </span>
</form>
<script>
frmproduct.onsubmit = async (e) => 
    e.preventDefault();
    if (!$("#frmproduct").valid())
        return false;
    let response = await fetch('/base/product/Create', 
        method: 'POST',
        body: new FormData(frmproduct)
    );

    let data = await response.json();

;
</script>

并从控制器获取文件

  [HttpPost, ValidateAntiForgeryToken]
        public async Task<JsonResult> Create(ProductViewModel model, CancellationToken cancellationToken)
        
           var File= Request.Form.Files;