不使用表单将文件传递给控制器​​,

Question

伙计们我试图通过使用表单将文件从视图加载到控制器,而浏览文件时应该使用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);
            }
        });
    });

Answer 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" />

在呈现视图并输入一些信息时 -

当您单击按钮时,输出将是 -