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