如何使用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控件在窗体标签和的preSS提交按钮，我可以得到的图像文件中像下面给出：

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和放大器;阿贾克斯）的方法。我不能

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

请帮忙

感谢。

推荐答案

HTML code

HTML Code

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

的Javascript code

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);
        }

    });
});

code在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屋！