H5中FileReader的認識

      難得今日白天沒有划水,但是因爲回去也是沒有事情做,所以還是稍微在晚上劃劃水。
      嗯,首先關於技術方面,有關的api接口需要具體瞭解一下,不然會浪費很多時間造輪子的。。
      目前先寫一個獲取文件上傳地址的參數,嗯,我之前的做法簡單粗暴。就是用ajax文件上傳然後將相應地址寫入相應的隱藏input的value裏。今日在瞭解的過程中,發現以前實在是太粗暴了(笑),其實在web的api接口中有這樣一個對象,FileReader,調用它需要先將其實例化。根據MDN文檔上描述的是這樣的:

FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件(或原始數據緩衝區)的內容,使用 File 或 Blob 對象指定要讀取的文件或數據。

寫的也是很明白了,我這裏就不再具體一一解釋,就只是將一個讀取文件上傳地址的方法記錄一下,以方便以後查找
      直接上demo算了

<input type="file" onchange="upload()">
<input type="hidden" id="t" value="">
<script>
	function upload() {
        //首先需要初始化FileReader的對象
        var file= new FileReader();
        //然後在這個對象中,有onload這個事件觸發器,意味着當文件上載完畢的時候會觸發,相應的代碼就是這樣了
        file.onload = function (e) {
            // get loaded data and render thumbnail.
            document.querySelector("#t").value=e.target.result;
        };
    }
</script>

還可以利用這個對象實現上載圖片後預覽等效果,利用的就是這個對象中
FileReader

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章