How to upload image in ASP.NET MVC 4 using ajax or any other technique without postback?

Question

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

Answer 1

Try this its working for me

   

$('#Upload').change(function () {
    debugger;
    var file = document.getElementById('Upload').files[0];
    var fileName = file.name;
    var fd = new FormData();
    fd.append("fileData", file);
    fd.append("key", '@Model.Id');

    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) { UploadProgress(evt); }, false);
    xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false);
    xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false);
    xhr.addEventListener("abort", function (evt) { UploadCanceled(evt); }, false);
    xhr.open("POST", "/ImageHandler.ashx", true);
    xhr.send(fd);
});


function UploadProgress(evt) {
    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        //$("#uploading").text(percentComplete + "% ");
    }
}

function UploadComplete(evt) {
    //if (evt.target.status == 200)
        //alert(evt.target.responseText);
    //else {
    //   // alert("Error Uploading File");
    //}
}

function UploadFailed(evt) {
   // alert("There was an error attempting to upload the file.");
}

function UploadCanceled(evt) {
    //alert("The upload has been canceled by the user or the browser dropped the connection.");
}

Handler:

public class ImageHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        //context.Response.ContentType = "text/plain";
        //context.Response.Write("Hello World");]



        string filePath = Constants.ImageFolderPath;

        //write your handler implementation here.
        if (context.Request.Files.Count <= 0)
        {
            context.Response.Write("No file uploaded");
        }
        else
        {
            for (int i = 0; i < context.Request.Files.Count; ++i)
            {
                HttpPostedFile file = context.Request.Files[i];
                if (context.Request.Form != null)
                {
                    string imageid = context.Request.Form.ToString();
                    imageid = imageid.Substring(imageid.IndexOf('=') + 1);

                    if (file != null)
                    {
                        string ext = file.FileName.Substring(file.FileName.IndexOf('.'));
                        if (ext.ToLower().Contains("gif") || ext.ToLower().Contains("jpg") || ext.ToLower().Contains("jpeg") || ext.ToLower().Contains("png"))
                        {

                            byte[] data;
                            using (Stream inputStream = file.InputStream)
                            {
                                MemoryStream memoryStream = inputStream as MemoryStream;
                                if (memoryStream == null)
                                {
                                    memoryStream = new MemoryStream();
                                    inputStream.CopyTo(memoryStream);
                                }
                                data = memoryStream.ToArray();
                                File.WriteAllBytes(Constants.ImageFolderPath + imageid + ".jpg", (byte[])data);
                                //club.club_image = Convert.ToBase64String(data);
                            }
                        }
                    }
                }
                else
                {

                }

                //file.SaveAs(context.Server.MapPath(filePath + file.FileName));
                context.Response.Write("File uploaded");
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}