如何在没有Form或Beging Form标记的情况下，在asp.net MVC 5中使用AJAX上传带有所有输入文本框

How to upload image with all entered textbox value using AJAX in asp.net MVC 5 without Form or Beging form tag?

本文关键字：Form AJAX 文本 输入 asp Beging net 情况下 MVC      更新时间：2023-09-26

我不想重新加载我的页面，所以我使用AJAX，这里是Index.chtml页面，用于带文本框的图像上传。这段代码目前正在运行，但我想使用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
....
}

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

查看此

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

I hope it will be useful for you.
相关文章：