MVC 使用AJAX POST上传图片的方式

我们来总结一下使用AJAX以POST方式上传图片的方法。

一、普遍的一种是以file的格式请求。在Request.Files中获取文件。

  public ActionResult UploadFile(HttpContext request)

        {

            HttpPostedFileBase img = Request.Files[0];

            string path = AppDomain.CurrentDomain.BaseDirectory + @"Upload/";

            img.SaveAs(Path.Combine(path, img.FileName));

            return View();

        }

 

二、另一种是通过Json上传64位编码(base64 URL)的图片数据进行保存。

64位编码的图片数据格式一般如下：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABG4AAAH0CAYAAABsCGvoAAAgAElEQVR4Xuy9C5RV1Zmo++96P3ZVURSv4hEEFdQobYKtJESjJME+6WgTpPUQIrfpY8NRui/aKlcvY2hON0fN5TIUbh/6XDs9bgah0+1BY+gk2p2QFpIAgk9AiGBhlQgIokgVRQFVu3bd9S+c21WbXVV71157Pfb+loNh1ar5+Oc3Z/H46p9zRnqsR3ggAAEIQAACEIAABCAAAQhAAAIQgAAEAkcggrgJ3JwQEAQgAAEIQAACEIAABCAAAQhAAAIQsAkgblgIEIAABCAAAQhAAAIQgAAEIAABCEAgoAQQNwGdGMKCAAQgAAEIQAACEIAABCAAAQhAAAKIG9YABCAAAQhAAAIQgAAEIAABCEAAAhAIKAHETUAnhrAgAAEIQAACEIAABCAAAQhAAAIQgADihjUAAQhAAAIQgAAEIAABCEAAAhCAAAQCSgBxE9CJISwIQAACEIAABCAAAQhAAAIQgAAEIIC4YQ1AAAIQgAAEIAABCEAAAhCAAAQgAIGAEkDcBHRiCAsCEIAABCAAAQhAAAIQgAAEIAABCCBuWAMQgAAEIAABCEAAAhCAAAQgAAEIQCCgBBA3AZ0YwoIABCAAAQhAAAIQgAAEIAABCEAAAogb1gAEIAABCEAAAhCAAAQgAAEIQAACEAgoAcRNQCeGsCAAAQhAAAIQgAAEIAABCEAAAhCAAOKGNQABCEAAAhCAAAQgAAEIQAACEIAABAJKAHET0IkhLAhAAAIQgAAEIAABCEAAAhCAAAQggLhhDUAAAhCAAAQgAAEIQAACEIAABCAAgYASQNwEdGIICwIQgAAEIAABCEAAAhCAAAQgAAEIIG5YAxCAAAQgAAEIQAACEIAABCAAAQhAIKAEEDcBnRjCggAEIAABCEAAAhCAAAQgAAEIQAACiBvWAAQgAAEIQAACEIAABCAAA...AgkKCA4CbBouoSAQIECBAgQIAAAQIECBAgkIaA4CaNOuoFAQIECBAgQIAAAQIECBAgkKCA4CbBouoSAQIECBAgQIAAAQIECBAgkIaA4CaNOuoFAQIECBAgQIAAAQIECBAgkKCA4CbBouoSAQIECBAgQIAAAQIECBAgkIaA4CaNOuoFAQIECBAgQIAAAQIECBAgkKCA4CbBouoSAQIECBAgQIAAAQIECBAgkIaA4CaNOuoFAQIECBAgQIAAAQIECBAgkKCA4CbBourS9wLLy8vhypUrob+/Pxw8eBALAQIECBAgQIAAAQIECBAonIDgpnAlS7vBY2Nj4e7du6GpqSkMDg4KXNIut94RIECAAAECBAgQIECAQBkBwY0hUjcC09PT4enTp9kMmdIxOzsbhoeHw/z8fOjp6QlDQ0Ohubk5XL16NbS3t4epqakwMjIS2trafvTavXv3ws2bN1e+Pjo6GmZmZkJLS8ua13R0dNSNh4YQIECAAAECBAgQIECAAAHBjTFQNwLj4+Ph2LFjq86y+XzZU29vb4ghzPHjx0NfX1/W/vj11V6LAc+FCxdCDHG6urqy82NANDk5GS5evPija+oGQ0MIECBAgAABAgQIECBAgMAnAcGNYVA3AqsFN4uLi9mSqbm5uZXlUzG4KQUypRkyMbj50ms3btzIlmCVjiNHjmTBzQ+vqRsMDSFAgAABAgQIECBAgAABAoIbY6CeBCYmJrKlUgMDAyvNiq/FmTJHjx4Nly9fDpcuXQp5gpvPZ9yUbr5a2FNPHtpCgAABAgQIECBAgAABAgTMuDEG6kqgtDlxbNTp06fD4cOHw7Vr17J9aU6dOhWWlpbCmTNnvnrGTdwDp7THTWnj49UCoLrC0BgCBAgQIECAAAECBAgQaHgBwU3DDwEABAgQIECAAAECBAgQIECAQL0KCG7qtTLaRYAAAQIECBAgQIAAAQIECDS8wP8AN7hUDozwDE4AAAAASUVORK5CYII=

可以在html的image标签中直接指定给src。

Ajax上传方法：

var picture = jqplotToImg($('#ChartContent'));

    //prompt("", picture);



    $.ajax({ type: 'POST',

        url: '../Demo/UploadFileJson',

        async: false,

        data: { source: picture },

        success: function (data) {

            //alert(data);

        }

    });

MVC中接收，并保存：

 public ActionResult UploadFileJson(JObject request)

        {

            string img64Data = request.Value<string>("imgData");



            using (MemoryStream ms = new MemoryStream(Convert.FromBase64String(img64Data)))

            {

                using (Bitmap img = new Bitmap(ms))

                {

                    img.Save("SavingPath" + "ImageName.jpg");

                }

            }

            return Json("ok");

        }