H5拖拽的file物件與blob物件

阿新 • • 發佈：2018-12-16

File物件可以用來獲取某個檔案的資訊，還可以用來讀取這個檔案的內容。通常情況下，File物件是來自使用者在一個元素上選擇檔案後返回的FileList物件，也可以是來自由拖放操作生成的 DataTransfer物件。

使用者在選擇一個或者多個檔案後，可以通過File API訪問這些File物件，這些物件被包含在一個FileList物件中。所有type為file的input都有一個files屬性，通過Element.files可以返回FileList物件。

<!DOCTYPE html>
<html lang="en">
<head>
    < 
meta charset="UTF-8">
    <title>file物件</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #dddddd;
        }
        #box{ 


            width: 80%;
            height: 600px;
            background-color: #999999;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    //圖片預覽
    const box = document.querySelector('#box');
    console.log(box);
    box.ondragover = function ( 
e) {
        e.preventDefault();
        e.stopPropagation();
        return false
    }
    box.ondrop = function (e) {
        const dt = e.dataTransfer;
        console.log(dt.files);
        console.log(dt.files[0].name);
        console.log(dt.files[0].size / 1024 / 1024);
        console.log(dt.files[0].type);
        console.log(dt.files[0].lastModified);
        console.log(dt.files[0].lastModifiedDate.toLocaleDateString());
        console.log(dt.files[0].lastModifiedDate.toLocaleTimeString());
        console.log(dt.files[0].lastModifiedDate.toDateString());


        const oFile = dt.files.item(0);//獲取第一個檔案
        //建立檔案讀取物件
        const file = new FileReader();
        //讀取檔案
        file.readAsDataURL(oFile);
        //檔案載入
        file.onload = function () {
            //只處理圖片
            if(/image/.test(this.result)){ //判斷是否為圖片
                console.log(this.result); //返回database字串的編碼，就是一張圖片的編碼
                const img = new Image();
                img.src = this.result;
                img.width = 300; //圖片的寬度屬性

                img.onload = function () {
                    box.appendChild(img);
                }
            }

        };
        e.preventDefault();
        e.stopPropagation();
        return false


    }

</script>
</body>
</html>

files有一個length屬性和item方法，可以通過files[index]或者files.item(index)獲取我們選擇的file物件。每個File物件中包含了檔案的一些詳細資訊：

<body>
    <input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*">

    <script>
        var fileInput = document.querySelector("#fileInput");
        fileInput.addEventListener("change", function (event) {
            var file = fileInput.files[0];
            console.log(fileInput.files)
        }, false)
    </script>
</body>

FileReader 物件允許Web應用程式非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容，使用 File 或 Blob 物件指定要讀取的檔案或資料

其中File物件可以是來自使用者在一個元素上選擇檔案後返回的FileList物件,也可以來自拖放操作生成的 DataTransfer物件,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後返回結果

H5拖拽的file物件與blob物件

H5拖拽的file物件與blob物件

JS 上傳檔案之FormData 與Blob 物件

JS 上傳檔案之FormData 與Blob 物件

OSG拖拽器簡介與示例

jQuery 物件與 dom物件區別

C++沉思錄__函式物件與函式物件介面卡

Data Wrangling文摘：Data Carpentry:在 Python 中複製物件與引用物件

H5拖拽事件

使用 MultipartFile 結合（formData物件、Blob物件）實現圖片上傳功能簡介

jQuery物件與js物件互相轉換

jQuery物件與DOM物件的區別和聯絡

宣告物件與建立物件的區別

JQuery應用例項學習 —— 19 JQuery物件與DOM物件的關係與轉換

java物件與json物件之間的轉換

NX二次開發-UFUN和NXOpen結合開發中Tag_t物件與TaggedObject物件轉換方法

java物件與json物件間的相互轉換詳細解釋

python不變物件與可變物件

H5拖拽7個事件

H5拖拽的簡單實現

建立物件與使用物件——談談工廠的作用

H5拖拽的file物件與blob物件

相關推薦