H5拖拽的file对象与blob对象

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对象

猜你喜欢