html5 文件api

時間 2019-12-10
標籤 html5 html 文件 api 欄目 HTML5 简体版
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5文件API</title>
<script type="text/javascript">
  
   function getName(){
	   var file = document.getElementById("file");
	   //document.getElementById("file").files 
	   // 返回 FileList對象 
	   var files = file.files;
	  for(i=0;i<files.length;i++){
		  //獲取文件的名稱 
		  alert(files[i].name);
	  }
   }
   
   function getSize(){
	   var file = document.getElementById("file1");
	   
	   var size =file.files[0].size;//顯示文件的尺寸 
	   /*
	   excel:application/vnd.ms-excel
	   word:application/msword(.doc), 
	       application/vnd.openxmlformats-officedocument.wordprocessingml.document(.docx)
	       實際應用中要根據具體的type類型 限制 上傳的類型 ,用正則表達式驗證 
	   */
	   var type =file.files[0].type;//文件的類型  image/png,image/jpeg,text/plain,text/html
	  
	   //對文件列表FileList纔有意義,對file對象沒有做用,也就是說上傳單個文件也要有數組形式訪問其屬性 ..
	   
	   var name =file.files[0].name;
	   document.getElementById("mark").innerHTML=type;
	   alert(size+","+type+","+name);
   }
</script>
</head>
<body>

   <form action="">
   <!-- html5爲文件域添加multiple="multiple"支持多文件上傳，用逗號分隔 -->
   附件:<input type="file" id="file" multiple="multiple" onblur="getName();" >
   <!-- 添加accept屬性 限制要選擇的文件的類型，但只是在打開文件選擇那一刻篩選出符合條件的文件
   ,例如:下面要求文件類型爲圖片,打開文件選擇框時只會列出全部的圖片文件;
   具體狀況各大瀏覽器支持不同: Firefox 列出全部文件，chrome自動篩選出符合條件的文件,IE9和FF同樣，
   能夠說不支持吧
    -->
   頭像 : <input type="file" id="file1" accept="image/*">
      文件的類型:<mark id="mark"></mark>
   <input type="button" value="獲取文件大小" onclick="getSize();">
   </form>
   <!-- FileReader接口 示例  -->
   
   
   
   <input type="file" id="rd">
   <span id="msg"></span>
  <input type="button" value="以文本形式讀取" onclick="readAsText();">
  <input type="button" value="以二進制形式讀取" onclick="readAsBinaryString();">
  <input type="button" value="以dataURL形式讀取" onclick="readAsDataURL();">
  
  <script type="text/javascript">
     
   var file = document.getElementById("rd");
   
   if (typeof FileReader =="undefined"){
	   msg.value="您的瀏覽器不支持FileReader";
	   //禁用文件域 
	   file.setAttribute("disabled","disabled");
   }
   else{
	  console.info("恭喜您能夠使用...");
   }
   //將文件讀取爲文本
     function readAsText(){
    	
	   var file = document.getElementById("rd").files[0];
	   var reader = new FileReader();
	   reader.readAsText(file);
	   //onload 加載成功 後觸發 
	   reader.onload=function(e){
		   var msg = document.getElementById("msg");
		   //把讀取到的文本信息顯示 
		   //msg.value=this.result;
		   console.info(reader.result);
	   }
	   
     }
     //將文件讀取爲二進制
 function readAsBinaryString(){
    	 
	 var file = document.getElementById("rd").files[0];
	   var reader = new FileReader();
	   //二進制形式讀取 
	   reader.readAsBinaryString(file);
	   //onload 加載成功 後觸發 
	   reader.onload=function(e){
		   var msg = document.getElementById("msg");
		   //把讀取到的文本信息顯示 
		   //msg.value=this.result;
		   
		   console.info(reader.result);
		   console.info("load觸發,加載成功...");
	   }
	   //加載結束觸發,無論成功失敗 
	   reader.onloadend=function(){
		   console.info("loadend觸發,加載結束...");
	   }
	   //開始加載觸發 
	   reader.onloadstart=function(){
		   console.info("loadstart觸發,開始加載...");
	   }
	   //記載出錯觸發 
	   reader.onerror=function(){
		   console.info("error觸發,加載過程當中出現錯誤...");
	   }
	   //中斷記載觸發 
	   reader.onabort=function(){
		   console.info("abort觸發,加載中斷觸發...");
	   }
	   //記載進程 ,可用progress標籤顯示加載進度 
	   reader.onprogress=function(){
		   console.info("progress觸發,加載中...");
	   }
    	 
     }
  //將文件讀取爲DataURL
 function readAsDataURL(){
	 var file = document.getElementById("rd").files[0];
	   var reader = new FileReader();
	   //圖片驗證 
	   if (!/image\/\w+/.test(file.type)){
		   alert("只能輸出圖片");
		   return ;
	   }
	   //二進制形式讀取 
	   reader.readAsDataURL(file);
	   //onload 加載成功 後觸發 
	   reader.onload=function(e){
		   var msg = document.getElementById("msg");
		   //把讀取到的文本信息顯示 
		   //msg.value=this.result;
		   //console.info(reader.result);
		   //把圖片顯示到頁面中....
		   msg.innerHTML='<img src='+this.result+' />';
	   } 
 }
   </script>
</body>
</html>