利用 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 屬性即可。




沒有留言: