$(".uploadFile").on('change', function () {
        console.log('new file uploaded')
        //var array = $("#productImage").getIdArray();
        var file_data =$(this).find(".productImage").prop("files")[0];
        var files = event.target.files
        $(this).find(".imageViewer").attr("src", window.URL.createObjectURL(files[0]));
        var form_data = new FormData();
        var product_Id = (this.ProductId) ;
        var viewModel = { ProductId: product_Id, ProductImage: file_data};
        form_data.append("file", file_data);
        $.ajax({
            url: "/DailyMenuPlanner/AddPhoto",
            cache: false,
            contentType: false,
            processData: false,
            data: viewModel,
            type: 'post',
            success: function (result) {
                if (result.success == true) { alert("success!"); }
                else { alert("fail!"); }
            }
        });
    });

<div >
    
                            <ul >
                                @if (Model.Products != null && Model.Products.Count > 0)
                                {
                                    @for (int i = 0; i < Model.Products.Count; i  )
                                    {
                                        <li >
                                            <input asp-for="@Model.Products[i].IsChecked" type="checkbox" />
                                            <label asp-for="@Model.Products[i].ProductId">  @Model.Products[i].ProductName</label>
                                            <input type="hidden" asp-for="@Model.Products[i].ProductId"/>
                                            <input type="hidden" asp-for="@Model.Products[i].ProductName" asp-route-productId/>
                                            <div  >
                                                <label >
                                                    <img  width="50" height="50" style="border: 1px solid #000000; cursor:pointer;" />
                                                </label>
                                                <input asp-for="@Model.Products[i].ProductImage" asp-for-ProductId="@Model.Products[i].ProductId" type="file"  onchange="getImage(this.value);" style="visibility:none; display:none"/>
                                                
                                            </div>
                                        </li>
                                    }
                                }
                                else
                                {
                                    <li >nodata</li>
                                }
                            </ul>
                        </div>

[.js]
$(".uploadFile").on('change', function () {
        console.log('new file uploaded')
        //var array = $("#productImage").getIdArray();
        var file_data =$(this).find(".productImage").prop("files")[0];
        var files = event.target.files
        $(this).find(".imageViewer").attr("src", window.URL.createObjectURL(files[0]));
        var form_data = new FormData();
        var product_Id = (this.ProductId) ;
        var viewModel = { ProductId: product_Id, ProductImage: file_data};
        form_data.append("file", file_data);
        $.ajax({
            url: "/DailyMenuPlanner/AddPhoto",
            cache: false,
            contentType: false,
            processData: false,
            data: viewModel,
            type: 'post',
            success: function (result) {
                if (result.success == true) { alert("success!"); }
                else { alert("fail!"); }
            }
        });
    });

[controller method]
[HttpPost]
        public async Task<JsonResult> AddPhoto(DailySelectedProductViewModel dataModel)
        {
            IFormFile file = dataModel.ProductImage;

            using (var memoryStream = new MemoryStream())
            {
                await file.CopyToAsync(memoryStream);
                byte[] imageAsArray = memoryStream.ToArray();
            }

            return Json(file.FileName);
            
        }

Here, I am getting null value in my ViewModel from view, I have of one list of elements and each elements have choose file (innput type="file") with them. on choosing any image On Change event get trigger and then it calls the controller method but i am getting stuck that how can i send the model value from view to controller. also the productImage is of datatype = IFormFile. so after getting it pass from view to controller how can i convert it into bytes or does sqlserver column with "image" type save it directly ?

please help me with this issue! Thank you :)

CodePudding user response：

Try to use data:form-data, and you can insert key with values into this FormData() obj then you can transmit it to your controller. If you want to know more about FormData() then read