文件讀取FileReader
阿新 • • 發佈:2017-09-17
部分 clas 文件讀取 text cti nbsp data res ner
//設置一個文件讀取器 ? var fr= new FileReader(); ? //通過兩種方式讀取文件 ? readAsText:用文本的方式讀取文件; ? readAsDataURL:用DataURL的方式讀取文件 (較常用); ? //文件讀取完成事件 ? fr.onload=function(){ } ? //獲取文件讀取結果(圖片文件可以賦值給img); ? fr.result ?
demojs部分:
//找對象 ? var file=document.getElementById("f"); ? var img=document.getElementById("portrait"); ? var bigImg=document.getElementById("bigImg"); ? //註冊事件 ? file.addEventListener("change",function () { ? //file存儲了所有上傳的文件 //data就是指上傳的文件 ? var data=file.files[0]; ? //如果瀏覽器兼容 if(window.FileReader){ //創建一個文件讀取器 fr=new FileReader(); //讓文件讀取器讀取整個文件 fr.readAsDataURL(data); ? // 給fr註冊文件加載事件 ? fr.onload=function () { img.src=fr.result; bigImg.src=fr.result; } } ? }) ? html: ? var file=document.getElementById("f"); ? var img=document.getElementById("portrait"); ? var bigImg=document.getElementById("bigImg");
文件讀取FileReader