jQuery模式对话框窗口中的MVC 4文件上传答案

【问题标题】：MVC 4 File upload in jquery modal dialog windowjQuery模式对话框窗口中的MVC 4文件上传
【发布时间】：2017-07-26 00:36:39
【问题描述】：

我正在开发基于 MVC/Razor 的应用程序我正在尝试在 jquery 模式对话框内的视图中设置文件上传

这是我的查看代码

@using (Html.BeginForm("<MyAction>", "<MyController>", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div>
        <input type="file" id="UploadImage" name="UploadImage" style="width:705px;" />
    </div>
    <div>
        <input id="sbmt" type="submit" value="Save" />
    </div>
}

但当我执行控制器操作时，Request.Files.Count 始终为 0

public ActionResult MyAction(Model model){
     ...
}

我在这里错过了什么？

谢谢

【问题讨论】：

这是视图中唯一的<form> 元素吗？
好吧，直接在这个视图代码上没有
元素...
当然你有一个<form> 元素——这就是Html.BeginForm() 生成的。
好的，但除此之外，不，我没有任何其他
元素
我认为您的表单不仅仅是文件输入吗？您的参数model 是否正确绑定？如果在方法中包含参数HttpPostedFileBase uploadImage 会发生什么？

标签： asp.net-mvc-4 razor file-upload

【解决方案1】：

通过向 Ajax Post 显式添加表单数据，我能够在 JQuery 模式对话框 (MVC) 中执行文件上传：

Javascript 代码：

     // Checking whether FormData is available in browser  
                if (window.FormData !== undefined) {
                    var fileUpload = $("#fileInput").get(0);
                    var files = fileUpload.files;

                    // Create FormData object  
                    var fileData = new FormData();

                    // Looping over all files and add it to FormData object  
                    for (var i = 0; i < files.length; i++) {
                        fileData.append(files[i].name, files[i]);
                    }

                    // Adding additional parameters to FormData object  

                    fileData.append('name', $('#nameinput').val());  
                    fileData.append('uniqueID', $('#hiddenFieldUniqueID').val());  


                $.ajax({
                    type: 'POST',
                    contentType: false,
                    processData: false,
                    url: '@Url.Action("UploadFile", "YourController")',
                    data: fileData, 
                    success: function (returnValues) {
                        $('.ui-dialog-buttonpane').unblock();
                        if (returnValues["success"] ==  true) {
                            bootbox.alert(returnValues["feedback"]);
                            $(dlg).dialog("close");
                        }
                        else {
                            bootbox.alert(returnValues["feedback"]);
                        }
                    },
                    error: function (returnValue) {
                        $('.ui-dialog-buttonpane').unblock();
                        debugger;
                        bootbox.alert({ message: "Oops - Error Occured!" + returnValue, size: 'small' });
                    }
                    });
                }
                else {
                    bootbox.alert("Your browser doesnt support the method we are using to upload files (FormData is not supported)");
                }

HTML（不需要表单标签）：

<div class="col-md-9">
                <label class="btn btn-primary" for="fileInput">
                    <input id="fileInput" type="file" style="display:none"
                           onchange="$('#upload-file-info').html(this.files[0].name)">
                    Select
                </label>
                <span class='label label-info' id="upload-file-info"></span>
            </div>

控制器：

      [HttpPost]
    public ActionResult UploadFile()
    {
        YourObjectFile yourObjectFile = null;
        try
        {
            string name = Request.Form["name"];
            if (Request.Files.Count > 0)
            {
                yourObjectFile = new YourObjectFile ();
                HttpPostedFileBase file = Request.Files[0];

                if (file != null && file.ContentLength > 0)
                {
                    string fileName = file.FileName;
                    using (var reader = new System.IO.BinaryReader(file.InputStream))
                    {
                        yourObjectFile.RawData = reader.ReadBytes(file.ContentLength);
                    }
                }
            }                
    .......

这种方法的功劳归于这里：http://www.c-sharpcorner.com/UploadFile/manas1/upload-files-through-jquery-ajax-in-Asp-Net-mvc/

【讨论】：