如何通过ajax将上传的图像路径传递给控制器​​[重复]

Question

当通过 ajax 将上传的文件传递给 asp.net MVC 控制器时，文件属性在控制器中显示为空值。

document.getElementById('fileUpload').files[0] 操作获取的图像文件对象并转换为JSON.stringify(fileName) 但是当将该对象传递给 asp.net mvc 控制器时 它在 mvc 控制器中显示空值。

如果有人知道如何将该文件传递给 ajax 到 mvc 控制器，请发布您的答案

管理员控制器

[HttpPost]
        public string AddRetailer(HttpPostedFileBase file, string storeName, string storeUrl, string ecommercePlatform)
        {
            try {
                Bswayed.Admin.Retailer retailer = new Bswayed.Admin.Retailer();
                return JsonConvert.SerializeObject(data);
            } catch (Exception ex) {
                throw ex;
            }
        }

Asp.net 上传表单

 <input type="file" id="fileUpload" name="fileUpload" onchange="this.parentNode.nextSibling.value = this.value"/>Browse

<input class="input-lg"  
@Html.TextBoxFor(Model => Model.StoreLogo, new { placeholder=@ViewBag.StoreLogo})

Java 脚本（Ajax）

 function AddRetailer()
 {    
     try {  
       var storeName = $("#StoreName").val();
       var storeUrl = $("#StoreURL").val();
       var retailerLogoPath = $("#StoreLogo").val();
       var ecommercePlatform = $("#EcommercePlatform").val();
       var fileName = document.getElementById('fileUpload').files[0]

       $.ajax({         
           url: $("#addRetailer").val(),
           cache: false,
           type: "POST",         
           data: { 
            file:JSON.stringify(fileName), 
            storeName: storeName, 
            storeUrl: storeUrl, 
            ecommercePlatform: ecommercePlatform 
           },
           dataType: "json",
           success: function (data) {                          
           },
           error: function (resp) {
               alert(resp);
           }
       });
     }
     catch (e) {
     }
 }

Answer 1

您不需要对上传的图片路径进行字符串化。下面的代码在我的应用程序中工作。我只是使用 FormData() 来获取所有表单。之后添加了我想发送给控制器的所有表单项。在这种情况下，您不需要在控制器中传递参数。您可以通过 Request.Files 获取图像和 Request.Form 获取额外数据。我希望，它可以帮助你。如果有什么不对的地方，分享给我，我会整理出来的。

Java 脚本 -

function AddRetailer()
{    
 try {  
   var storeName = $("#StoreName").val();
   var storeUrl = $("#StoreURL").val();
   var retailerLogoPath = $("#StoreLogo").val();
   var ecommercePlatform = $("#EcommercePlatform").val();
   var fileName = document.getElementById('fileUpload')..get(0).files;

   var data = new FormData();
   if (fileName.length > 0) {
        data.append("userUploadedImage", fileName[0]);
        data.append("storeName", storeName);
        data.append("storeUrl", storeUrl);
        data.append("ecommercePlatform", ecommercePlatform);
    }


   $.ajax({         
       url: $("#addRetailer").val(),
       processData: false,
       contentType: false,
       type: "POST",         
       data: data,
       success: function (data) {                          
       },
       error: function (resp) {
           alert(resp);
       }
   });
 }
 catch (e) {
 }}

控制器 -

    [HttpPost]
    public string AddRetailer()
    {
     HttpPostedFileBase image =  Request.Files["userUploadedImage"];
     string storeName = Request.Form["storeName"];
     string storeUrl = Request.Form["storeUrl"];
     string ecommercePlatform = Request.Form["ecommercePlatform"];
    }