在不使用表单的情况下将文件传递给控制器​​， [英] passing file to controller without using form,

问题描述

伙计们，我正在尝试不使用form将文件从视图加载到控制器，而浏览文件时应该使用Ajax将文件加载到控制器，这有可能吗?

guys i am trying to load file from view to controller with out using form , while browsing a file the file should be loaded to controller using Ajax ,is it possible?

        <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 的解决方案.此解决方案的一个警告是 FormData 支持仅在现代浏览器中可用，因此不要指望它可与IE7-9等旧版浏览器一起使用.

Here goes the solution using FormData. One caveat with this solution is that FormData support is only available in modern browsers, so do not expect this to work with old browsers like IE7 - 9 etc.

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

Create a controller action in following way -

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

那么您的HTML将是-

Then your HTML would be -

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

渲染视图并输入一些信息后-

When the view is rendered and entered with some information -

单击按钮时，输出将为-

When you click button, Output would be -

这篇关于在不使用表单的情况下将文件传递给控制器​​，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！