【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

利用 FileReader 讓瀏覽器讀取外部圖片檔案

嘗試選取一個圖片檔案,完成之後,會顯示在畫面下方的矩形框內:




來看看相關的程式碼,列舉如下:

<script>
            var file;
            var fileReader;
            function cfile_change() {
                file = document.getElementById('cfile').files[0];
                if (file) {
                    fileReader = new FileReader();
                    fileReader.onload = openfile;
                    readFileContent() ;
                }
            }
            function openfile(event) {
                document.getElementById('imgx').src = event.target.result;              
            }
            function readFileContent() {
                fileReader.readAsDataURL(file);
            }
</script>

當使用者完成圖片檔案的選取,會執行 cfile_change() 這個 change 事件處理器,建立一個 FileReader 物件,並且註冊其 load 事件處理器,最後調用 readAsDataURL() ,讀取參數file-也就是圖片的內容,最後於回呼函式 openfile() 中,取得圖片的 url 位址,將其設定給畫面上的 <img> 標籤 src 屬性,呈現圖片內容。

如果將其中的 event.target.result 取出,顯示出來結果內容如下:



當FileReader讀取圖片完成載入,回傳的是圖片的位址,這段位址表示圖片的所在位置,當然你不需要去理解它的內容只需將其設定給 img 元素的 src 屬性即可。




沒有留言: