HTML5 FileAPI圖程式碼分享-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5 FileAPI圖程式碼分享

黄舟

Mar 28, 2017 pm 04:00 PM

在HTML5中，提供了一個關於檔案操作的API，透過這個API，對於從web頁面存取本機檔案系統的相關處理變得十分簡單。到目前為止只有部分瀏覽器對它提供支援。

1.File List 物件和File物件

　　FileList物件表示使用者選擇的檔案列表，在HTML4中file控制項內只允許放置一個文件，但在HTML5中透過新增multiple屬性，file控制項內允許放置多個文件。控制項內的每個使用者選擇的檔案都是一個file對象，而FileList就是這些file對象的列表，代表使用者選擇的所有檔案。 file物件有兩個屬性，一個是name，代表檔案名稱不包含檔案的路徑；一個是lastModifiedDate，表示檔案最後被修改的日期。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=&#39;UTF-8&#39;/>
        <title>FileList and File </title>
        <script type="text/javascript" language="JavaScript">
function showFiles(){
var file,
                len = document.getElementById(&#39;file&#39;).files.length;//返回FileList文件列表对象
for (var i=0; i < len; i++) {
                  file = document.getElementById(&#39;file&#39;).files[i];
                  alert(file.name);
                };
                
            }            
</script>               
    </head>
    <body>
        <input type="file" id=&#39;file&#39; multiple="multiple" width="80px"/>
        <input type="button" id="bt1" value="click" onclick="showFiles();"/>
    </body>
</html>

2.Blob對象

　　提到Blob對象，估計有人會想起OracleDB中Blob字段，意義上有些類似。 HTML5中Blob表示二進位原始數據，它提供一個slice()方法，可以透過這個方法存取到位元組內部的原始資料塊。事實上，上面提到的file物件繼承了Blob物件。

　　Blob物件的兩個屬性，size：表示一個物件的位元組長度。 type：表示一個物件的MIME類型，如若是未知類型傳回空字串。

function showFileInfo(){
                var file = document.getElementById(&#39;file&#39;).files[0];
                var size = document.getElementById(&#39;fileType&#39;);
                var type = document.getElementById(&#39;fileSize&#39;);
                size.innerHTML = file.size;
                type.innerHTML = file.type;
            }

　　對於圖像類型的文件，Blob物件的type屬性都是以image/開頭，可以利用這個特性對使用者選擇的文件類型做判斷。

function showFileInfo(){
                var file = document.getElementById(&#39;file&#39;).files[0];
                if(checkImage(file)){
                var size = document.getElementById(&#39;fileType&#39;);
                var type = document.getElementById(&#39;fileSize&#39;);
                size.innerHTML = file.size;
                type.innerHTML = file.type;
                }
                else{
                    return ;
                }
            }
            function checkImage(file){
                if(!/img\/\w+/.test(file.type)){
                    alert(file.name + "不是图片");
                    return false;
                }
                return true;
            }

　　另外，file控制項在HTML5標準中加入了accept屬性，用來限制接受的檔案類型，但目前各瀏覽器對齊支援都僅限於在開啟檔案選擇視窗時預設的選擇影像檔案而已，如果選擇其他類型，控制項也能接受。

3.FileReader介面

　　3.1介面方法

　　FileReader介面提供了四個方法，其中3個用來讀取檔案，1個用來中斷文件的讀取。

方法名稱	參數	描述
readAsBinaryString()	file	將檔案讀取為二進位字串，通常會將它傳到後端，後端可以透過這段字串儲存檔案
readAsDataURL( )	file	將檔案讀取為一段data url字串，事實上是將小檔案以一種特格式的URL位址直接讀取到頁面。小檔案通常指圖片與html等格式檔案
readAsText()	file [encoding]	將檔案以文字的方式讀取，其中第二個參數為文本的編碼。
abort()	(none)	#中斷讀取操作。

需要注意的是，無論讀取成功或失敗，方法都不會回傳讀取結果，結果回傳在result屬性中。

　　3.2介面事件

　　FileReader介面提供了一套完整的事件模型，用於擷取讀取檔案時的狀態。

事件	描述
#onabort	資料讀取中斷時發生
onerror	資料讀取出錯時發生
#onloadstart	資料讀取開始時發生
onload	資料讀取成功完成時發生
#onloadend	資料讀取完成時發生無論讀取成功還是失敗
onprogess	資料讀取中

##　　3.3實例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>FileReader</title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <script type="text/javascript" language="JavaScript">
var file ,
                result; 
function  myLoad() {
                 file = document.getElementById(&#39;file&#39;).files[0];
                 result = document.getElementById(&#39;result&#39;);
            }
if(typeof FileReader == &#39;undefined&#39;){
                result.innerHTML = "你的浏览器不支持 FileReader";
                file.setAttribute("disabled","disabled");
            }
function readAsDataURL(){
if(!/image\/\w+/.test(file.type)){
                    alert(file.name + &#39;不是一个图片类型的文件&#39;);
                }else{
var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(e){
                        
                        result.innerHTML = "<img  src="/static/imghwm/default1.png"  data-src=" + reader.result +"  class="lazy"  / alt="HTML5 FileAPI圖程式碼分享" >";
                    };
                }
            }
function readAsBinaryString(){
var reader = new FileReader();
                reader.readAsBinaryString(file);
                reader.onload = function(e){                    
                    result.innerHTML = reader.result;
                };
            }
function readAsText(){
var reader = new FileReader();
                reader.readAsText(file);
                reader.onload=function(e){                                       
                    result.innerHTML = reader.result;
                };
            }
</script>

    </head>
    <body onload="myLoad();">
        <p>
            <input type="file" id=&#39;file&#39;/>
            <input type=&#39;button&#39; id="bt_DataURL" value="读取图片" onclick="readAsDataURL();"/>
            <input type="button" id="bt_BinaryString" value="读取二进制字符串" onclick="readAsBinaryString();"/>
            <input type="button" id="bt_textString" value="读取文本信息" onclick="readAsText();"/>
        </p>   
        <div id="result">
            
        </div>
    </body>
</html>

以上是HTML5 FileAPI圖程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee