Question

我不想重新加载我的页面所以我使用AJAX，这里是用文本框上传图像的Index.cshtml页面。此代码目前正在运行，但我想使用ajax将数据从cshtml页面传递到控制器端，而不使用表单标记。

<form class="form-horizontal" id="fc" action="@Url.Action("SaveAcademy", "Academy")" method="post" enctype="multipart/form-data">
                            @Html.AntiForgeryToken()

    <input type="text" class="form-control" onblur="checktxtvalidation(this.id)" name="txtacademyname" id="txtacademyname">

    <input type="file" class="form-control" name="fileupload" id="fileupload" multiple="multiple">

    <input type="submit" value="submit" id="submit" name="submit" class="btn btn-block btn-primary" />

</form>

控制器

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SaveAcademy(HttpPostedFileBase fileupload, FormCollection fc)
{
....
.... here are some code for inserting data into database
....
}

Answer 1

<input type="file" class="form-control" name="fileupload" id="fileupload" >

不需要使用表单标签。

<script type="text/javascript">

$('#fileupload').on('change', function (e) {
    var files = e.target.files;
    var text=$('#txtacademyname').val();
    if (files.length > 0) {
        var data = new FormData();
        data.append("file", files[0]);
        data.append("acatext", text);
        console.log(data);
        $.ajax({
            type: "POST",
            url: '@Url.Action("SaveAcademy","Academy")',
            contentType: false,
            processData: false,
            data: data,
            success: function (data) {
                alert(data);
            },
            error: function () {

            }

        });
    }
});

您可以使用按钮触发上传或像我的演示只使用更改事件。如果您不添加processData: false以防止自动处理，您将获得'Illegal Invocation'。

 [HttpPost]
    public ActionResult SaveAcademy(HttpPostedFileBase file, string acatext)
    {
        if (file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var location = Path.Combine(
                Server.MapPath("~/Images"), fileName);
            file.SaveAs(location);
            return Json("File uploaded"+acatext);
        }
        else
        {
            return Json("Failed");
        }
    }

如果需要，请删除[ValidateAntiForgeryToken]，然后您必须手动将其添加到您的ajax标题中。

编辑按钮点击 添加按钮到页面<input type="button" value="upload" id="upload" />，注册点击事件

<script type="text/javascript">
    $('#upload').on('click', function (e) {
        var fileform = document.getElementById('fileupload');
        var files = fileform.files;
        var text=$('#txtacademyname').val();
        if (files.length > 0) {
            var data = new FormData();
            data.append("file", files[0]);
            data.append("acatext", text);
            console.log(data);
            $.ajax({
                type: "POST",
                url: '@Url.Action("SaveAcademy","Academy")',
                contentType: false,
                processData: false,
                data: data,
                success: function (data) {
                    alert(data);
                },
                error: function () {

                }

            });
        }
    });
</script>

Answer 2

查看

http://www.c-sharpcorner.com/UploadFile/b696c4/how-to-upload-and-display-image-in-mvc/

I hope it will be useful for you.

如何在没有Form或Beging表单标签的asp.net MVC 5中使用AJAX上传所有输入文本框值的图像？

2 个答案: