1. 程式人生 > >JavaScrip File類拓展

JavaScrip File類拓展

on() inner fun 16px 字符串 表單元 錯誤 adas asc

##今天在做jsp的文件上傳功能,想著上傳文件後在當前頁面把選取的文件信息展現出來,查來查去,發現了js中的file類,之前在w3c和runboob盯了好久找找不到。。。。不過終於還是在網上查到了這個類!

1.在表單元素上<input type="fiel" name="file" id="file" />,可以選擇一個或多個文件,通過獲取文件元素對象的集合files,來操作每一個對象files[i];

用法:DOM操作

  var files=document.getElementById("file").files;

  var file_length = files.length;//files的文件數量

  var file=files.file[i];//每一個file對象對應一個文件。

  file.name//獲取本地文件系統的文件名。

  file.size//文件的字節大小。

  file.type//字符串類型,文件的MIME類型。

  file.lastModifiedDate//文件的最後修改時間。(只使用於Chrome瀏覽器)

  

2.通過FileReader類型讀取文件中的數據(異步文件讀取)

FileReader有一下幾種讀取文件數據的方法

1).readAsText(file,encoding);以純文本的形式讀取文件,將讀取到的文件保存到result屬性。encoding參數用於指定編碼類型,是可選的。

2).readAsDataURL(file);讀取文件並將文件數據以URL形式保存到result屬性中。(讀取圖像文件常用方法)

3).readAsBinaryString(file);讀取文件並將一個字符串保存在result屬性中,字符串中的每個字符表示一字節。

4).readAsArrayBuffer(file);讀取文件並將一個包含文件內容的ArrayBuffer保存在result屬性中。

3.FileReader提供了幾個事件最有用的三個事件,progress,error,load,分別表示是否又讀取了新數據,是否發生了錯誤,是否已經讀完整個文件。

使用方法:

var reader=new FileReader();

if(/image/.test(file[0].type)){//操作圖像

  reader.readAsDataURL(file[0]);

  var type=‘image‘;

}else{//操作文本

  read.readAsText(file[0]);

  var type=‘text‘;

}

reader.onerror=function(){

  //出錯時執行

}

reder.onprogress=function(){

//有加載新數據時執行

}

reder.onload=function(){

  if(type==‘image‘){

    var html="<img src=\" "+reader.result+" \">";//已經加載完了執行

  }else if(type=‘text‘){

    var html=reader.result

  }

  Obj.innerHTML=html;//顯示在指定元素對象上

}

JavaScrip File類拓展