web之前端獲取上傳圖片並展示

　　1、html中經常存在圖片上傳的問題，但是后續的展示基本上是通過后台輸出流的方式來呈現的。但是這樣耗費的資源比較多。所以這里學習了一種前端直接展示圖片的方式（供參考）。

　　2、html的編寫方式比較簡單

　　<img id="image" class="image"/>    
　　<input id="imageFile"  type="file" name="imageFile" accept="image/png,image/jpg,image/jpeg,image/bmp"/>

　　說明：實際代碼中file的框可以直接做成按鈕觸發，file可以直接隱藏。image展示圖片區域，可以自己設定長寬。

　　3、后台實現邏輯

　　　　　　　//圖片加載
            $("#imageFile").change(function () {
                var file = this.files[0];
                if (window.FileReader) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    //監聽文件讀取結束后事件
                    reader.onloadend = function (e) {
                        //e.target.result就是最后的路徑地址
                        $("#image").attr("src",e.target.result);
                    };
                }
            });