FileReader實作上傳圖檔時的圖檔預覽

為什麼要使用FileReader？

在html靜态檔案中，當我們在input檔案選擇框中選擇一個檔案時，該input框的值為檔案的絕對路徑，這個時候我們可以直接将該路徑複制給我們需要預覽的圖檔的src即可

可是在jsp這些伺服器的腳本檔案中，我們打開一個檔案時，會發現檔案選擇框的值不是檔案的絕對路徑，而是c://fackpath之類的路徑，這是伺服器的臨時檔案存放路徑，是以，我們直接将該路徑複制給src是不可以的，這時候，就需要使用HTML5的新增對象FileReader來實作該功能了

FileReader簡單介紹

FileReader 對象允許Web應用程式異步讀取存儲在使用者計算機上的檔案（或原始資料緩沖區）的内容，使用 File 或 Blob 對象指定要讀取的檔案或資料。

其中File對象可以是來自使用者在一個元素上選擇檔案後傳回的FileList對象,也可以來自拖放操作生成的 DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後傳回結果.

通常我們使用filereader的構造方法建立一個filereader對象，然後使用readAsDataURL(file)等方法來讀取指定的檔案，在實作圖檔預覽時，我們需要使用readAsDataURL()方法來讀取img檔案；當讀取了之後，其讀取的結果會自動儲存在filereaer的result屬性中；通常我們在filereader對象的onload事件中對result屬性進行操作，因為我們需要在檔案讀取完畢時才進行相應的操作；filereader.src的值可以直接指派給img.src屬性值中

FileReader實作圖檔預覽

<input type="file" name="file" />
<img src="" />

<script src="js/jquery.min.js"></script>
<script>
    var changefun = function(){
        var file = $(this).files[];
        var reader = new FileReader();
        reader.onload = function(){
            $("img").attr("src",reader.result);
        };
        reader.readAsDataURL(file);
    };
    $("input").change(changefun);
</script>