如何通过ajax将上传的图像路径传递给控制器

时间:2014-03-09 09:12:43

标签: javascript ajax asp.net-mvc json

通过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) {
     }
 }

1 个答案:

答案 0 :(得分:0)

您无需stringfy上传的图片路径。下面的代码在我的应用程序中工作。我只是使用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"];
    }