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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM