亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

HTML5文件操作-文件上傳(上)

xorpay / 2061人閱讀

摘要:最后一次修改文件的時間。選擇文件代碼上傳如圖這時看文字顯示如圖此時我們在獲得對象時,不能用這種方式獲取文件對象了不然只獲取的是對象集合里面的一個對象。

js要操作文件,首先得講到的是文件api里常見的幾個對象:

1,Blob
2,F(xiàn)ile
3,F(xiàn)ileList
4,F(xiàn)ileReader

1.1 Blob對象表示的是二進制數(shù)據(jù),提供了一個slice方法,該方法可以訪問到字節(jié)內(nèi)部的數(shù)據(jù)段(也就是整個數(shù)據(jù)的某一段數(shù)據(jù))

1.2 File對象,F(xiàn)ile對象是從Blob對象繼承過來的,表示的是一個具體的文件,有兩個屬性,name,文件的名字,不包括路徑。lastModifiedDate,最后一次修改文件的時間。當然,從Bolb繼承下來的,Blob有的,F(xiàn)ile也有。
代碼:



    window.onload = function() {
    var file = document.getElementById("file");
    var button = document.getElementById("button");
    var ofile = null;


    button.onclick = function() {
        //用戶還沒有點擊“選擇文件”把文件添加進input里(input里為空)
        //而直接點擊了上傳按鈕,就讓它退出
        if (file.files.length == 0) {
            console.log("請選擇文件");
            return false;
        }
        //這里只選擇了一個文件
        ofile = file.files[0]; 
        console.log(ofile);
    }
}

如圖:

通過File來找size,type,lastModifiedDate
代碼:

console.log(ofile.size + "-" + ofile.type + "-" + ofile.lastModifiedDate);

如圖:

1.3 FileList對象表示的是一個文件file對象的集合,當我們用h5的多文件上傳時,首先得要在type="file"的input元素里添加multiple屬性,multiple="multiple",可允許用戶選擇多個文件,具體操作按住Ctrl繼續(xù)選擇多個文件,選擇好之后,點擊完成,比如你選了3個文件,這時,FileList對象里就存有3個不同的file對象,每個不同的小File對象里面保存著該圖片的信息。
選擇3文件
代碼:

 
 

如圖:

這時看文字顯示:
如圖:

此時,我們在獲得file對象時,不能用files[i]這種方式獲取文件對象了(files[i//0,1,2]),不然只獲取的是對象集合里面的一個file對象。所以,我們要把files的[]去掉。ofile = file.files; 這樣獲取的就是一個文件列表,然后我們循環(huán)遍歷每個對象看看其內(nèi)容:
代碼:

    button.onclick = function() {
        //用戶還沒有點擊“選擇文件”把文件添加進input里(input里為空)
        //而直接點擊了上傳按鈕,就讓它退出
        if (file.files.length == 0) {
            console.log("請選擇文件");
            return false;
        }
        //這里只選擇了一個存有文件對象的文件列表,該列表具有長度length
        ofile = file.files;
        console.log(ofile.length);//3
        console.log("------------------------")
        //遍歷每個file對象
        for (var i = 0; i < ofile.length; i++) {
            console.log(ofile[i]);
        }     
    }

結(jié)果如圖: 每個file對象的內(nèi)容

1.4 FileReader 對象用來讀取文件中的數(shù)據(jù),異步的方式讀取文件保存到內(nèi)存中,并賦值給JavaScript的變量
FileReader里的四個讀取文件的方法:

    1,readAsBinaryString();該方法把讀取到的文件數(shù)據(jù)以二進制的形式保存到result屬性里面,參數(shù)為一個Bolb對象。
    2,readAsDataURL();該方法會把該圖片讀成一個url保存到result里,也就是說可以把這個圖片的結(jié)果作為img的src屬性使用,就能顯示出該圖片
    3,readAsText();該方法是按某種編碼來讀取文件,第一個參數(shù)為Blob對象,第二個參數(shù)為編碼方式,
    4,abort();中斷文件讀取。
FileReader里的事件:
    1,onloadstart 讀取文件時開始觸發(fā);
    2,onprogress 讀取文件的過程中觸發(fā);
    3,onload 讀取成功時觸發(fā);
    4,onabort 讀取中斷時觸發(fā)
    5,onerror 讀取錯誤時觸發(fā)
    6,onloadend 讀取完成后觸發(fā) (無論成功與否)

1.4.1 readAsBinaryString()
在使用這些方法之前,先要搞個對象出來,var reader = new FileReader();創(chuàng)建完對象之后,直接調(diào)用該對象上的方法:reader.readAsBinaryString(ofile);把要讀取的文件對象放進去讀取結(jié)果在result里面,reader.result;
看代碼:

button.onclick = function() {
//用戶還沒有點擊“選擇文件”把文件添加進input里(input里為空)
//而直接點擊了上傳按鈕,就讓它退出
        if (file.files.length == 0) {
            console.log("請選擇文件");
            return false;
        }
        //這里只選擇了一個存有文件對象的文件列表,該列表具有長度length
        ofile = file.files[0];

        var reader = new FileReader();//創(chuàng)建一個讀取文件對象reader
        
        reader.readAsBinaryString(ofile);

        reader.onload = function() {//文件讀取成功后 打印出數(shù)據(jù)結(jié)果,
            console.log(reader.result);
        }
    }

看圖片:

1.4.2 readAsDataURL()方法:

直接看代碼:


    button.onclick = function() {
        //用戶還沒有點擊“選擇文件”把文件添加進input里(input里為空)
        //而直接點擊了上傳按鈕,就讓它退出
        if (file.files.length == 0) {
            console.log("請選擇文件");
            return false;
        }
        //這里只選擇了一個存有文件對象的文件列表,該列表具有長度length
        ofile = file.files[0];

        var reader = new FileReader();//創(chuàng)建一個讀取文件對象reader
        
        reader.readAsDataURL(ofile);

        reader.onload = function() {//文件讀取成功后 打印出數(shù)據(jù)結(jié)果,
            document.body.innerHTML += ""
        }

    }

結(jié)果如圖:

1.4.3 readAsText()方法的用法:

代碼:

reader.readAsText(ofile, "UTF-8");//默認utf-8;

        reader.onload = function() {//文件讀取成功后 打印出數(shù)據(jù)結(jié)果,
            console.log(reader.result);
        }

結(jié)果:

以上就是我對js文件API的學習及理解,筆者技術(shù)水平有限,期待對js文件API的更進一步了解,筆者將會堅持寫HTML5文件操作-文件上傳(中),拖拽上傳,(下),上傳文件至服務器。
待續(xù)。。。

列表項目

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/82819.html

相關(guān)文章

  • HTML5文件操作-文件

    摘要:最后一次修改文件的時間。選擇文件代碼上傳如圖這時看文字顯示如圖此時我們在獲得對象時,不能用這種方式獲取文件對象了不然只獲取的是對象集合里面的一個對象。 js要操作文件,首先得講到的是文件api里常見的幾個對象: 1,Blob 2,F(xiàn)ile 3,F(xiàn)ileList 4,F(xiàn)ileReader 1.1 Blob對象表示的是二進制數(shù)據(jù),提供了一個slice方法,該方法可以訪問到字節(jié)內(nèi)部的數(shù)據(jù)段...

    沈儉 評論0 收藏0
  • webuploader與網(wǎng)宿云踩坑

    摘要:上傳結(jié)構(gòu)與網(wǎng)宿云要求上傳結(jié)構(gòu)的不同上圖是翻自網(wǎng)宿云的文檔的分片上傳流程。鑒于網(wǎng)宿云的上傳一片一塊在邏輯上沒毛病,我們同樣能一塊一塊完成上傳這里注意請仔細看網(wǎng)宿云或七牛云分片上傳的文檔,了解如何分片上傳。 webuploader踩坑 webuploader是百度fex團隊開發(fā)的一個十分便捷的上傳插件,但是我們在實際生產(chǎn)中,會發(fā)現(xiàn)使用它與我們的需求有各種各樣的出入。最近做上傳功能,踩了不少...

    Yi_Zhi_Yu 評論0 收藏0
  • HTML5 進階系列:文件下載

    摘要:前言中提供的文件在前端中有著豐富的應用,上傳下載讀取內(nèi)容等在日常的交互中很常見。構(gòu)造函數(shù)中的第一個參數(shù)是一個數(shù)組,可以存放對象對象對象和字符串。通過構(gòu)造函數(shù)創(chuàng)建一個對象該對象有以下方法中斷讀取操作。 前言 HTML5 中提供的文件API在前端中有著豐富的應用,上傳、下載、讀取內(nèi)容等在日常的交互中很常見。而且在各個瀏覽器的兼容也比較好,包括移動端,除了 IE 只支持 IE10 以上的版本...

    learn_shifeng 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<