HTML5 文件上傳

HTML5 文件上傳

另參考 http://www.jianshu.com/p/46e6e03a0d53

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>