ajax不会将文件发布到控制器mvc(ajax does not post file to controller mvc)

 即时发布一个包含文件和html数据的表单以及一个获取地理编码的函数，但控制器只从ajax帖子而不是文件中获取数据，我认为它与按钮发布的事实有关但是我我不确定，  
    @using (Html.BeginForm("Create", "lecture", FormMethod.Post, new { enctype = "multipart/form-data", id = "RestoForm" }))
{
    //values has remove for clear
    <div class="form-group">
        @Html.LabelFor(f => f.RImage) <i class="glyphicon glyphicon-folder-open"></i>
        <input type="file" name="RImage" class="btn btn-default btn-sm btn-google btn-group-justified hvr-shadow " />
    </div>

    <input type="button" class="btn btn-primary btn-lg" onclick="GetLocation()" value="Finish" />
}

@section scripts
{

    <script type="text/javascript">
        function GetLocation() {
            var geocoder = new window.google.maps.Geocoder();

            var Street = document.getElementById('txtAddress').value;
            var City = document.getElementById('txtCity').value;
            var address = City + Street;
            console.log(address);
            var labelLat = document.getElementById('Latitude');
            var labellong = document.getElementById('longitude');

            geocoder.geocode({ 'address': address },
                function (results, status) {
                    if (status == window.google.maps.GeocoderStatus.OK) {
                        var latitude = results[0].geometry.location.lat();
                        var longitude = results[0].geometry.location.lng();
                 console.log("Latitude: " + latitude + "\nLongitude: " + longitude); //Ok.

                        labelLat.value = latitude; //Ok.
                        labellong.value = longitude;
                        $.ajax({
                            url: 'Create',
                            type: 'POST',
                            data: $('#RestoForm').serialize(),
                            datetype: "html",
                            success: function (data) {
                                $('#RestoForm').html(data);
                            }
                        });

                        error: function e(xhr, ajaxOptions, thrownError) {
                            alert(xhr.status);
                            alert(thrownError);
                        }
                    }
                });
        };
    </script>
 
 控制`  
[Authorize, HttpPost, ValidateAntiForgeryToken]
        public ActionResult Create(LectureFormViewModel viewModel) // RImage =Null
        {`

im posting a form that contain file and html data plus a function to get geocode ,but the controller only get the data from the ajax post but not the file, i assume that it have something to do with the fact the button posting but i'm not sure ,  
    @using (Html.BeginForm("Create", "lecture", FormMethod.Post, new { enctype = "multipart/form-data", id = "RestoForm" }))
{
    //values has remove for clear
    <div class="form-group">
        @Html.LabelFor(f => f.RImage) <i class="glyphicon glyphicon-folder-open"></i>
        <input type="file" name="RImage" class="btn btn-default btn-sm btn-google btn-group-justified hvr-shadow " />
    </div>

    <input type="button" class="btn btn-primary btn-lg" onclick="GetLocation()" value="Finish" />
}

@section scripts
{

    <script type="text/javascript">
        function GetLocation() {
            var geocoder = new window.google.maps.Geocoder();

            var Street = document.getElementById('txtAddress').value;
            var City = document.getElementById('txtCity').value;
            var address = City + Street;
            console.log(address);
            var labelLat = document.getElementById('Latitude');
            var labellong = document.getElementById('longitude');

            geocoder.geocode({ 'address': address },
                function (results, status) {
                    if (status == window.google.maps.GeocoderStatus.OK) {
                        var latitude = results[0].geometry.location.lat();
                        var longitude = results[0].geometry.location.lng();
                 console.log("Latitude: " + latitude + "\nLongitude: " + longitude); //Ok.

                        labelLat.value = latitude; //Ok.
                        labellong.value = longitude;
                        $.ajax({
                            url: 'Create',
                            type: 'POST',
                            data: $('#RestoForm').serialize(),
                            datetype: "html",
                            success: function (data) {
                                $('#RestoForm').html(data);
                            }
                        });

                        error: function e(xhr, ajaxOptions, thrownError) {
                            alert(xhr.status);
                            alert(thrownError);
                        }
                    }
                });
        };
    </script>
 
controlle `  
[Authorize, HttpPost, ValidateAntiForgeryToken]
        public ActionResult Create(LectureFormViewModel viewModel) // RImage =Null
        {`

原文：https://stackoverflow.com/questions/40741704

更新时间：2022-03-22 16:03

最满意答案

 您可以使用FormData使用AJAX将文件发送到操作。  
var fm = new FormData();
fm.append("Name", $("#Name").val());
fm.append("RImage", $("#RImage").val());

$.ajax({
    url: 'Create',
    type: 'POST',
    data: fm,
    datatype: "html",
    contentType: false, // Not to set any content header
    processData: false, // Not to process data
    success: function (data) {
        $('#RestoForm').html(data);
    }
});

You can use FormData to send files to action using AJAX.  
var fm = new FormData();
fm.append("Name", $("#Name").val());
fm.append("RImage", $("#RImage").val());

$.ajax({
    url: 'Create',
    type: 'POST',
    data: fm,
    datatype: "html",
    contentType: false, // Not to set any content header
    processData: false, // Not to process data
    success: function (data) {
        $('#RestoForm').html(data);
    }
});