如何使用 ajax 或任何其他技术在 ASP.NET MVC 4 中上传图像而无需回发? [英] How to upload image in ASP.NET MVC 4 using ajax or any other technique without postback?

问题描述

我正在 MVC 4 中开发一个网站，用户在其中填写一些信息并将其保存以上传.除图像外的所有信息都使用 Javascript、Json 和 Ajax 保存在服务器上，如下所示:

I am developing a website in MVC 4, where user fill some information and save it to upload. all the information except image is being saved on server using Javascript, Json and Ajax, like given below:

$.ajax({
                    url: action,
                    type: "POST",
                    data: JSON.stringify(PostViewModel),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    beforeSend: function () {            
                    },
                    success: function (data) {
                    try{
                        alert('success');
                    }catch(err){alert(' Error: '+err);}

                    },
                    complete: function () {
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("Error occured");
                    }
            });

但是现在我还需要上传他的图片，但是我找不到任何可以使用这种方法或无需回发的方法.

But Now I need to upload his image also, but I couldn't find any method that can work with this approach or any without post back.

我知道将 FileUpload Control 放在 Form 标签中，然后按下提交按钮，我可以获得如下所示的图像文件:

I know putting FileUpload Control in Form tag and on press of submit button i can get image file like as given below:

 HttpPostedFileBase photo = Request.Files["photo"];
        if (photo != null)
        {
            Session["ImgPath"] = "~/Content/PostImages/" + photo.FileName;
            string path = Server.MapPath("~/Content/PostImages/");
            photo.SaveAs(path + photo.FileName);
        }

但是对于这种方法，我必须改变我无法保存内容的方法(使用 Javascript、Json 和 Ajax).

But for this method I'll have to change my approach of saving content (using Javascript, Json & Ajax) which I can't.

请帮忙

谢谢.

推荐答案

HTML 代码

<input type="file"  id="uploadEditorImage"  />

Javascript 代码

Javascript Code

$("#uploadEditorImage").change(function () {
    var data = new FormData();
    var files = $("#uploadEditorImage").get(0).files;
    if (files.length > 0) {
        data.append("HelpSectionImages", files[0]);
    }
    $.ajax({
        url: resolveUrl("~/Admin/HelpSection/AddTextEditorImage/"),
        type:"POST",
        processData: false,
        contentType: false,
        data: data,
        success: function (response) {
           //code after success

        },
        error: function (er) {
            alert(er);
        }

    });
});

MVC 控制器中的代码

Code in MVC controller

if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
        {
            var pic = System.Web.HttpContext.Current.Request.Files["HelpSectionImages"];
        }

这篇关于如何使用 ajax 或任何其他技术在 ASP.NET MVC 4 中上传图像而无需回发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！