日本在线免费播放,国产精品合集一区二区三区,亚洲国产欧美精品,久久青青草原精品国产不卡

在眾多HTML5規范中，有一部分規范是跟文件處理有關的，在早期的瀏覽器技術中，處理小量字符串是js最擅長的處理之一。但文件處理，尤其是二進制文件處理，一直是個空白。在一些情況下，我們不得不通過Flash/ActiveX/NP插件或云端的服務器處理較為復雜或底層的數據。今天，HTML5的一系列新規范正在致力于讓瀏覽器具備更強大的文件處理能力。

今天要介紹的FileAPI，就是為解決這類問題而生的。

總覽

FileAPI是一些列文件處理規范的基礎，包含最基礎的文件操作的JavaScript接口設計。其中最主要的接口定義一共有4個：

◆ FileList接口: 可以用來代表一組文件的JS對象，比如用戶通過input[type="file"]元素選中的本地文件列表

◆ Blob接口: 用來代表一段二進制數據，并且允許我們通過JS對其數據以字節為單位進行“切割”

◆ File接口: 用來代步一個文件，是從Blob接口繼承而來的，并在此基礎上增加了諸如文件名、MIME類型之類的特性

◆ FileReader接口: 提供讀取文件的方法和事件

這里有兩點細節需要注意：

1. 我們平時使用input[type="file"]元素都是選中單個文件，其本身是允許同時選中多個文件的，所以會用到FileList

2. Blob接口和File接口可以返回數據的字節數等信息，也可以“切割”，但無法獲取真正的內容，這也正是FileReader存在的意義，而文件大小不一時，讀取文件可能存在明顯的時間花費，所以我們用異步的方式，通過觸發另外的事件來返回讀取到的文件內容

接口描述

這4個接口其實并不復雜，也很好理解(接口中的“#Foo”表示任意Foo類型的對象)：

FileList接口



    
	
  1. 
		#FileList[index] // 得到第index個文件 
    2. 




	Blob接口




    
	
  1. 
		#Blob.size // 只讀特性，數據的字節數  
    2. 
	
  2. 
		#Blob.slice(start, length) // 將當前文件切割并將結果返回 
    3. 




	File接口




    
	
  1. 
		#File.size // 繼承自Blob，意義同上  
    2. 
	
  2. 
		#File.slice(start, length) // 繼承自Blob，意義同上  
    3. 
	
  3. 
		#File.name // 只讀屬性，文件名  
    4. 
	
  4. 
		#File.type // 只讀屬性，文件的MIME類型  
    5. 
	
  5. 
		#File.urn // 只讀屬性，代表該文件的URN，幾乎用不到，暫且無視 
    6. 




	FileReader方法




    
	
  1. 
		#FileReader.readAsBinaryString(blob/file) // 以二進制格式讀取文件內容  
    2. 
	
  2. 
		#FileReader.readAsText(file, [encoding]) // 以文本(及字符串)格式讀取文件內容，并且可以強制選擇文件編碼  
    3. 
	
  3. 
		#FileReader.readAsDataURL(file) // 以DataURL格式讀取文件內容  
    4. 
	
  4. 
		#FileReader.abort() // 終止讀取操作 
    5. 




	FileReader事件




    
	
  1. 
		#FileReader.onloadstart // 讀取操作開始時觸發  
    2. 
	
  2. 
		#FileReader.onload // 讀取操作成功時觸發  
    3. 
	
  3. 
		#FileReader.onloadend // 讀取操作完成時觸發(不論成功還是失敗)  
    4. 
	
  4. 
		#FileReader.onprogress // 讀取操作過程中觸發  
    5. 
	
  5. 
		#FileReader.onabort // 讀取操作被中斷時觸發  
    6. 
	
  6. 
		#FileReader.onerror // 讀取操作失敗時觸發 
    7. 




	FileReader屬性




    
	
  1. 
		#FileReader.result // 讀取的結果(二進制、文本或DataURL格式)  
    2. 
	
  2. 
		#FileReader.readyState // 讀取操作的狀態(EMPTY、LOADING、DONE) 
    3. 




	代碼示例



	舉例一：控制file控件，讀取其中的第二個文件，并將其文本內容在控制臺輸出




    
	
  1. 
		var input = document.querySelector('input[type="file"]'); // 找到第一個file控件  
    2. 
	
  2. 
		var firstFile = input.files[0]; // file控件的files特性其實就是一個FileList類型的對象  
    3. 
	
  3. 
		var secondFile = input.files[1]; // 當file控件的multiple特性為true時，我們可以同時選擇多個文件，通過input.files[n]可以按序訪問這些文件  
    4. 
	
  4. 
		var reader = new FileReader(); // 新建一個FileReader類型的對象  
    5. 
	
  5. 
		reader.readAsText(secondFile); // 按文本格式讀取file控件中的第二個文件  
    6. 
	
  6. 
		reader.onloadend = function (e) { // 綁定讀取操作完成的事件  
    7. 
	
  7. 
		    console.log(reader.result); // 取得讀取結果并輸出  
    8. 
	
  8. 
		}; 
    9. 




	舉例二：給一個含utf-8編碼的文本文件file去掉BOM頭信息




    
	
  1. 
		var size = file.size; // 先取得文件總字節數  
    2. 
	
  2. 
		var result = file.slice(3, size - 3); // 用slice方法去掉開頭的3個字節 
    3. 




	最后，對FileAPI實踐的三點注意



	1. 由于規范尚未截稿，#File.urn尚存較大變數，webkit并未實現此特性



	2. #Blob.slice在webkit內核中加入了前綴，即#Blob.webkitSlice，且第二個參數不是“length”，而是“end”，話句話說，上面的示例二應改為file.webkitSlice(3, size)才能生效



	3. 規范中還明確規定了各種出錯處理和異常處理，這些內容是同樣重要的：不論對于一套完備的規范，還是對于一個健壯的程序而言。由于篇幅有限，這部分就不細說了，大家可以在W3C官網自由查閱
                                

                                
                                
                                
                            

                        

                        
                    

                

            

        

        

    

    




    
    
    

        

            

                

                    

                        
                    

                    

                        
穩定

                        產品高可用性高并發
                    

                

                

                    

                        
                    

                    

                        
貼心

                        項目群及時溝通
                    

                

                

                    

                        
                    

                    

                        
專業

                        產品經理1v1支持
                    

                

                

                    

                        
                    

                    

                        
快速

                        MVP模式小步快跑
                    

                

                

                    

                        
                    

                    

                        
承諾

                        我們選擇聲譽
                    

                

                

                    

                        
                    

                    

                        
堅持

                        10年專注高端品質開發
                    

                

            

        

    

    

    
    
    

    
    
    

        
            
            
    
                
  • 
                    返回頂部
                
    •