jquery - 将用户通过引导模式上传的选定图像传递给控制器​​方法

Question

我正在创建一个bootstrap modal与图像一起插入表单数据输入。将表单输入数据传递给控制器​​不是问题，但是将图像传递给控制器​​方法有问题。我得到的图像路径为：C:\fakepath\image.PNG

@*============ modal for data insert ==================*@
<div class="modal fade" id="insert_firm_modal" role="dialog" aria-hidden="true" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-xlg" role="document">
        <div class="modal-content" id="insert_firm_modal_content">

            <form id="form_firm_data" enctype="multipart/form-data" method="POST">
                @Html.AntiForgeryToken()
                <div class="modal-header">
                    
                        <button type="button" class="btn-close" data-dismiss="modal" style="float:right;" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <span>@(Model.FirmId > 0 ? "Update":"New")</span>
                    </h4>
                </div>
                <div class="modal-body">
                    @Html.HiddenFor(f => f.FirmId)
                    @*====== form ===========*@
                    <fieldset>
                        // input data....
                        <div class="row">                           
                            <div class="col-md-4">
                                <div class="form-group ">
                                    <label class="required title_header">Image</label>
                                    <input type="file" class="form-control" id="i_image" required name="ImageTitle" accept="image/*">
                                </div>
                            </div>                            
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div id="i_imagePrvw" class="thumbnail" style="display:none">
                                    <img class="img-responsive" id="i_targetImg" style="display:block; object-fit:fill;height:140px;width:120px;" />
                                    <div class="caption">
                                        <a href="#" onclick="clearPreview()"><i class="glyphicon glyphicon-trash"></i></a>
                                        <p id="description"></p>
                                        <p id="i_full_path"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-sm" data-dismiss="modal"><span aria-hidden="true">Cancel</span></button>
                    <input type="submit" value="Create" class="btn btn-default" id="btn_submit"/>
                </div>
            </form>
        </div>
    </div>
</div>

脚本：：

<script>
    $(document).ready(function () {
        $('#btn_submit').click(function () {

            var testModel = {
                // passing form input data,
                ImageFile: $('#i_image').val(),
                ImageTitle: $('#i_image').val(),
                ImagePath: $('#i_image').val()

            };

            $.ajax({
                type: "POST",
                url: "/FirmModels/Create",
                data: JSON.stringify(testModel),
                contentType: "application/json;charset=utf-8",
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        console.log(response.responseText);
                    }
                },
                error: function (response) {
                    alert("failed...");
                }
            })

            return false;
        })
    })
</script>

通过 post 方法传递图像可以使用HttpPostedFileBasein 控制器方法，但它不适用于 bootstrap modal。

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create( CompanyModel vdm_, HttpPostedFileBase n_image)

那么如何将选定的图像传递给控制器​​方法。

标签： jqueryasp.netajaxasp.net-mvcasp.net-mvc-4