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

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

看看这个

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

I hope it will be useful for you.

Answer 2

<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 () {

            }

        });
    }
});

您可以使用按钮触发上传或喜欢我的演示只需使用更改 event.And 如果您不添加 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 header.

编辑使其工作按钮点击 添加按钮到页面 <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>

如何在没有 Form 或 Beging 表单标签的情况下使用 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?

javascript

asp.net-mvc

jquery

asp.net-ajax

asp.net-mvc-4