在不使用表单的情况下将文件传递给控制器，答案

【问题标题】：passing file to controller without using form,在不使用表单的情况下将文件传递给控制器，
【发布时间】：2015-07-05 06:27:18
【问题描述】：

伙计们，我正在尝试在不使用表单的情况下将文件从视图加载到控制器，而在浏览文件时，应该使用 Ajax 将文件加载到控制器，这可能吗？

        <td>Import Excell file:</td>                                
        <td><input type="file" id="fileUpload" name="fileUpload" /></td>



$('#fileUpload').die().live("change", function (e) {
        e.preventDefault();
        var file_name = $("#fileUpload").val();
        var fileName = $("#fileUpload").val();
        var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);     
        var file_data = $("#fileUpload").prop("files")[0];



        var form_data = new FormData();
        form_data.append("file", file_data);
        alert("hahaha");
        $.ajax({
            type: 'POST',     
            url: '@Url.Action("ImportExcell","Uploadfile")',
            data: form_data,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function (response) {
                alert(response);
            }
        });
    });

【问题讨论】：

可以使用FormData，但是这个解决方案可能无法在IE9等一些旧版本的浏览器中运行。如果你只针对新的浏览器，我可以给你解决方案。

标签： javascript jquery ajax file asp.net-mvc-4

【解决方案1】：

这里是使用FormData 的解决方案。此解决方案的一个警告是 FormData 支持仅在现代浏览器中可用，因此不要指望这适用于 IE7 - 9 等旧浏览器。

按以下方式创建控制器动作 -

public JsonResult GetFormData(HttpPostedFileBase file, string Name)
{
    return Json(true);
}

那么你的 HTML 将是 -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
    $(function () {
        $("#btnSubmit").click(function () {
            $.ajax({
                url: "/Home/GetFormData",
                type: "POST",
                data: function () {
                    var data = new FormData();
                    data.append("name", jQuery("#name").val());
                    data.append("file", jQuery("#file").get(0).files[0]);
                    return data;
                }(),
                contentType: false,
                processData: false,
                success: function (response) {                        
                },
                error: function (jqXHR, textStatus, errorMessage) {
                    console.log(errorMessage);
                }
            });
        });
    });
</script>    

Name : <input type="text" id="name" /> <br />
File: <input type="file" id="file" /> <br />
<input type="button" value="Click" id="btnSubmit" />

当视图被渲染并输入一些信息时 -

当你点击按钮时，输出将是 -

【讨论】：