JQuery文件上傳及以Base64字符串形式呈現圖片

一：上傳之

首先，你必然得有一個 file input，如下：

<td>
    <img id="imgGif" style="display: none" />
    <input type="file" id="imgGifFile" name="imgGifFile" value="選擇圖片" class="easyui-validatebox"
            data-options="
        @if (ViewBag.IsEdit != true)
        {
        @:required: true,missingMessage:'請選擇課程圖片！',
        }
        " />
</td>

其次，讓我們 upload，如下：

$.ajaxFileUpload({
    url: '@ViewBag.Domain/Course/CreateUpdate',
    type: 'post',
    data: otherObj,
    secureuri: false,
    fileElementId: 'imgGifFile',
    dataType: 'json',
    success: function (data) {
        $("#courseBank").datagrid("reload");
        if ($("#Id").val() != "") {
            $.messager.alert("提示", "課程修改成功！");
        } else {
            $.messager.alert("提示", "課程添加成功！");
        }
    },
    error: function () {
        window.OnLoadFunc.isSaved();
        $.messager.alert("提示", "服務器無響應，請稍后重試！");
    }
});

其中，fileElementId 就是我們的 file input 的 Id 值，除此之外，如果我們要同時提交表單數據，則可以構建一個如上的 otherObj，是一個 json 對象。類似如下，

var result = {
    Id: $("#Id").val(),
    CategoryId: $("#categoryTree").tree("getSelected").id,
    Name: $("#name").val};

那么，服務端代碼如下：

public void CreateUpdate(Course course)
{
    HttpPostedFileBase imgGifFile = Request.Files["imgGifFile"];
    course.ImgGif = ImageHelper.GetImgByte(imgGifFile);
    if (!string.IsNullOrEmpty(course.Id))
    {
        _courseDal.Update(course);
    }
    else
    {
        course.Id = Guid.NewGuid().ToString().Replace("-", string.Empty);
        course.Creator = user.Id;
        _courseDal.Insert(course);
    }
}

服務器端，首先會自動根據 JSON 內容，構造 Course 對象，但是，文件需要通過 Request.Files["imgGifFile"]; 來進行獲取的，獲取完畢你就可以轉成二進制存放到數據庫。注意到ImageHelper，為一個幫助類，后面會專門貼出代碼。

 

二：從數據庫讀出來並轉為base64字符串，並在網頁上呈現出來

先看前台代碼：

$('#imgGif').attr("width", "100px");
$('#imgGif').attr("height", "100px");
$('#imgGif').attr("src", "@ViewBag.ImgGifSrc");
$('#imgGif').show();
$('#imgGif').after("<br/>");

無非就是ImgGifSrc，它是字符串如下：

ViewBag.ImgGifSrc = ImageHelper.Base64ImgToSrc(ViewBag.EditCourse.ImgGif);

現給出ImageHelper：

using System;
using System.Collections.Generic;
using System.Drawing.Imaging;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Web;

namespace YHBJ.Utility.Web
{
    public class ImageHelper
    {
        public static byte[] GetImgByte(HttpPostedFileBase imgFileBase)
        {
            if (imgFileBase != null && !string.IsNullOrEmpty(imgFileBase.FileName))
            {
                var len = imgFileBase.ContentLength;
                byte[] bytes = null;
                using (var obj = new BinaryReader(imgFileBase.InputStream))
                {
                    bytes = obj.ReadBytes(len);
                }

                if (bytes.Length > 2)
                {
                    string fileclass = string.Empty;
                    try
                    {
                        fileclass = bytes[0].ToString(CultureInfo.InvariantCulture);
                        fileclass += bytes[1].ToString(CultureInfo.InvariantCulture);
                    }
                    catch
                    {
                    }

                    String[] fileType = { "7173", //gif
                                          "255216", //jpg
                                          "6677" //bmp
                                        };

                    var flag = fileType.Any(t => fileclass == t);
                    if (flag)
                    {
                        return bytes;
                    }
                }
            }

            return null;
        }

        public static string Base64ImgToSrc(byte[] imgBytes)
        {
            if (imgBytes == null)
            {
                return string.Empty;
            }

            using (var stream = new MemoryStream(imgBytes))
            {
                using (var image = System.Drawing.Image.FromStream(stream))
                {
                    return string.Format(
                        "data:image/{0};base64,{1}",
                        GetImageExtension(image),
                        Convert.ToBase64String(imgBytes));
                }
            }
        }

        private static string GetImageExtension(System.Drawing.Image image)
        {
            var imgFormatList = typeof(ImageFormat).GetProperties(BindingFlags.Static | BindingFlags.Public);

            foreach (var item in imgFormatList)
            {
                var imgFormat = (ImageFormat)item.GetValue(null, null);
                if (imgFormat.Guid.Equals(image.RawFormat.Guid))
                {
                    return item.Name.ToLower();
                }
            }

            return "gif";
        }
    }
}

要注意的是，base64格式的圖片，有上限限制，默認多少來着，Anyway，bing之。

另，check圖片格式：

if ($("#imgGifFile").val() != "") {
    var strRegex = "(.gif|.GIF)$"; //用於驗證圖片擴展名的正則表達式
    var re = new RegExp(strRegex);
    if (!re.test($("#imgGifFile").val())) {
        $.messager.alert("提示", "必須是gif圖片！");
        return false;
    }
}