前端上傳檔案前預覽

<img src="" id="img-change" width="200px" height="200px" id="filePath" name="filePath">
<input type="file" id="file" style="display:none;" onchange="filechange(event)" class="btn btn-secondary radius">

<script>
$("#img-change").click(function () {
    $("#file").click();
})

var filechange = function (event) {
    var files = event.target.files, file;
    if (files && files.length > 0) {
        // 獲取目前上傳的檔案
        file = files[0];// 檔案大小校驗的動作
        if (file.size > 1024 * 1024 * 2) {
            alert('圖片大小不能超過 2MB!');
            return false;
        }
        r = new FileReader();  //本地預覽
        r.onload = function () {
            $(".img-change").attr("src", r.result);
        }
        r.readAsDataURL(file);    //Base64格式顯示預覽圖片
    }
};

console.log($("#filePath")[0].src) //獲取圖片src
</script>
 

.net 將base64位轉換為圖片並儲存到本地

/// <summary>
/// Base64
/// </summary>
public class Base64Helper
{
    /// <summary>
    /// 接收Base64編碼格式的圖片
    /// </summary>
    /// <param name="file">base64檔案</param>
    /// <param name="path">儲存地址</param>
    public static string Upload(string file,string path)
    {
        var suffixText = file.Split(',')[0];

        var baseText = file.Split(',')[1];

        //獲取檔案儲存路徑
        string basePath = AppDomain.CurrentDomain.BaseDirectory; //獲取當前專案所在目錄
        string suffix = ""; //檔案的字尾名根據實際情況
        if(suffixText.Contains("jpeg")) suffix = ".jpg";
        else if (suffixText.Contains("png")) suffix = ".png";
        else if (suffixText.Contains("gif")) suffix = ".gif";

        string strPath = basePath + path + suffix;

        //獲取圖片並儲存
        Base64ToImg(baseText).Save(strPath);

        return path + suffix; // 返回圖片地址
    }

    //解析base64編碼獲取圖片
    private static Bitmap Base64ToImg(string base64Code)
    {
        MemoryStream stream = new MemoryStream(Convert.FromBase64String(base64Code));
        return new Bitmap(stream);
    }
}