1 filelist對象與file對象:
<input type="file" id="file" multiple> //multiple可上傳多個文件
<input type="button" onclick="showFileName()" value="文件上傳">
<script>
function showFileName(){
var file; //創建file對象
for(var i;i<document.getElementById("file").files.length;i++){
file = document.getElementById('file').files[i]; //.files
console.log(file.name);
}
}
</script>
2 Blob對象:表示原始的二進制數據,file繼承自blob。
- 其屬性1:size 表示文件大小
- 屬性2:type 表示文件類型 如image/png
var file; file = document.getElementById("file").files[0]; file.size; //當前上傳文件的大小 file.type; 3 Filereader對象 包含5個對象:
- readAsBinaryString 將文件數據讀取爲二進制數據字符串
- readAsText 將文件數據讀取爲文本數據
- readAsDataURL 圖像路徑
- readArrayBuffer
- abort 中斷
6個事件:
- onabord
- onerror
- onloadstart
- onload
- onloadend
- onprogress 監聽進度
<input type="file" id="file">
<input type='button' value='讀取圖像‘ onclick='readAsDataURL()'>
<input type='button' value=讀取二進制’ onclick=''>
<input type='button value='讀取文本文件‘ onclick=''>
<div id='result' name='result>
<script>
var result = document.getElementById('result');
var file = document.getElementById('file');
function readAsDataURL(){
var file = document.getElementById('file').files[0];
var reader = new FileReader(); //創建filereader對象
reader.readAsDataURL(file); //讀取圖片文件
reader.onload = function(ofile){
var resultimg = document.getElementById('result');
resultimg.innerHTML = '<img src="'+ofile.target.result+'"+alt="">';
}
}
function readAsText(){
var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsText(file); //讀取文本內容
reader.onload = function(e){
var resulttxt = document.getElementById('result');
resulttxt.innerHTML = e.target.result;
}
}
</script>