技術標籤：圖片上傳.net

HTML中

<input type="file" id="file" style="display:none;" />
<div id="div">我是一個圖示<img id="image"></div>

這裡input:file設定隱藏是因為實際應用的時候我們不去點input:file，而是點這種型別的圖示↓（我這裡用div代替），所以隱藏起來，點div的時候手動觸發input:file的點選事件即可

JS中：

                    var file = document.getElementById('file');
                    file.onchange = function () {
                        var fileData = this.files[0];//獲取到一個FileList物件中的第一個檔案( File 物件),是我們上傳的檔案
                        var pettern = /^image/;
                        //console.info(fileData.type)
 


                        if (!pettern.test(fileData.type)) {
                            layer.msg('圖片格式不正確', { icon: 2 });
                            return;
                        }

                        var reader = new FileReader();
                        reader.readAsDataURL(fileData);//非同步讀取檔案內容，結果用data:url的字串形式表示
 

                        /*這裡只能獲得大小，不能獲取寬高*/
                        if (fileData.size > 3145728) {
                            layer.msg('圖片不得大於3M', { icon: 2 });
                            return;
                        }
                
                        /*需要獲取寬高時才需要這個img引數，不需要可以刪掉與img引數有關的所有程式碼*/
                        let url = window.URL || window.webkitURL;
                        let img = new Image();
                        img.src = url.createObjectURL(fileData);
    
                        /*當讀取操作成功完成時呼叫*/
                        reader.onload = function (e) {
                            //console.log(e); //檢視物件
                            //console.log(this.result);//值得一提的是，這個this.result就是圖片的url，只不過是base64的格式，直接賦給圖片的url是可以的
                            var _readerthis = this;
                        
                        /*必須要等img載入完才會有寬高資訊，若放在reader.onload外面這個(img.width) <= 480的判斷執行完才會出現寬高，這也是為什麼我要放在reader.onload裡面的原因*/
                            img.onload = function () {
                                if ((img.width) <= 480) {
                                    layer.msg('長圖寬度需大於480px', { icon: 2 });
                                    return;
                                }
                                /*沒有問題的話就可以賦值了*/
                                $("#image").attr("url",_readerthis.result);
                            }
                        }
                    }

					$("#div").click(function () { 
					          $("#file").trigger("click");
					})

以上即可在頁面顯示圖片了，有時我們在控制器（Controller）中需要用到該圖片byte[] 格式的資料流，可以直接將url傳入如下方法：

using System.Security;

        public byte[] getImgbyte(string url)
        {
            url = Regex.Replace(url, "data:image/(\\S*?);base64,", string.Empty);//過濾base64的格式
            byte[] data = Convert.FromBase64String(url);
            //要轉回base64的格式也是可以的，不過前面需要自行加上之前被過濾掉的“data:image/jpg;base64,” 後面的逗號一定要加上 "jpg"屬於圖片字尾名
            //string imgString = Convert.ToBase64String(data);
            return data;
        }