嘘~ 加载慢，正在从阿水的辣鸡服务器里偷取页面 . . .

文件操作

文件操作
JavaScript
发布日期:   2021-04-28
更新日期:   2021-05-10
文章字数:   1.7k
阅读时长:   9 分
阅读次数:  

文件操作

参考：MDN-在web应用程序中使用文件

显示文件大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>file size</title>
</head>

<body onload="updateSize()">
    <form name="uploadForm">
        <div>
            <input type="file" id="uploadInput" name="myFiles" onchange="updateSize();" multiple>
            selected files:<span id="fileNum">0</span>
            total size:<span id="fileSize">0</span>
        </div>
        <div><input type="submit" value="Send file"></div>
    </form>
    <script>
        function updateSize() {
            let nBytes = 0;
            oFiles = document.getElementById('uploadInput').files,
                nFiles = oFiles.length;
            //累加所有文件大小
            for (let nFileId = 0; nFileId < nFiles; nFileId++) {
                nBytes += oFiles[nFileId].size;
            }

            let sOutput = nBytes + "bytes";
            //单位转换
            const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
            for (nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
                sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
            }

            document.getElementById("fileNum").innerHTML = nFiles;
            document.getElementById("fileSize").innerHTML = sOutput;
        }
    </script>
</body>

</html>

自定义文件上传器/通过 click() 方法使用隐藏的 file input 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>custom</title>
    <style type="text/css">
        #fileSelect{
            background-color: aqua;
            width: 130px;
            height: 50px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <input type="file" id="fileElem" multiple accept="image/*" style="display: none;" onchange="handleFiles(this.files)">
    <button id="fileSelect">Select some files</button>

    <script type="text/javascript">
        const fileSelect = document.getElementById('fileSelect'),
        fileElem = document.getElementById('fileElem');

        //隐藏input文件框，并将button的点击事件转移到隐藏的input上
        fileSelect.addEventListener('click',(e)=>{
            if(fileElem){
                fileElem.click();
            }
        },false)

        function handleFiles(files){
            console.log(files);
        }
    </script>
</body>
</html>

无绑定事件触发文件上传/使用 label 元素来触发一个隐藏的 file input 元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无绑定事件触发文件上传</title>
    <style type="text/css">
        .visually-hidden {
            position: absolute !important;
            height: 1px;
            width: 1px;
            overflow: hidden;
            clip: rect(1px, 1px, 1px, 1px);
        }

        /* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */
        /*
            :focus CSS伪类 :focus表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
            MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus

            :focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。
            MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus-within

            outline CSS 的 outline 属性是在一条声明中设置多个轮廓属性的简写属性 ， 例如 outline-style, outline-width 和 outline-color。与border类似。
            MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline
        */
        input.visually-hidden:focus+label {
            outline: thin dotted;
            color: red;
        }

        input.visually-hidden:focus-within+label {
            outline: thin dotted;
            color: red;
        }
    </style>
</head>

<body>
    <input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
    <label for="fileElem">Select some files</label>
</body>

</html>

使用拖放来选择文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用拖放选择文件</title>
    <style type="text/css">
        #dropbox{
            width: 80%;
            height: 500px;
            background-color: rgb(132, 161, 245);
        }
    </style>
</head>
<body>
    <input type="file" onchange="handleFiles">
    <div id="dropbox"></div>

    <script type="text/javascript">
        let dropbox = document.getElementById('dropbox');
        dropbox.addEventListener("dragenter",dragenter,false);
        dropbox.addEventListener("dragover",dragover,false);
        dropbox.addEventListener("drop",drop,false);

        function dragenter(e){
            e.stopPropagation();
            e.preventDefault();
        }
        function dragover(e){
            e.stopPropagation();
            e.preventDefault();
        }
        function drop(e){
            e.stopPropagation();
            e.preventDefault();

            var dt = e.dataTransfer;
            var files = dt.files;

            handleFiles(files);
        }

        function handleFiles(files){
            console.log(files);
            /*处理逻辑*/
        }
    </script>

</body>
</html>

显示图片缩略图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示图片缩略图</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
        }
        .box .img{
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <input type="file" multiple onchange="handleFiles(this.files)">
    <div class="box"></div>
    <script type="text/javascript">
        function handleFiles(files){
            for(let i= 0;i<files.length;i++){
                var file = files[i];
                console.log(file);
                var imageType = /^image\//;

                if(!imageType.test(file.type)){//匹配图片类型文件
                    continue;
                }

                var img = document.createElement('img');
                var box = document.getElementsByClassName('box')[0];//放置缩略图的父容器

                img.classList.add('img');
                img.file = file;
                box.appendChild(img);

                /*
                    FileReader对象 允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
                    MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
                */
                var reader = new FileReader();

                /*
                    FileReader.onload
                    处理load (en-US)事件。该事件在读取操作完成时触发。
                */                
                reader.onload = (function(aImg){
                    return function(e){
                        aImg.src = e.target.result;
                    }
                })(img)

                /*
                    FileReader.readAsDataURL()
                    开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
                */
                reader.readAsDataURL(file);
            }
        }
    </script>
</body>
</html>

使用对象URL来显示图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用对象url来显示图片</title>
</head>
<body>
    <input type="file" id="fileElem" multiple accept="image/*" style="display:none;" onchange="handleFiles(this.files)">
    <a href="#" id="fileSelect">Select some files</a>
    <div id="fileList">
        <p>No files selected！</p>
    </div>


    <script type="text/javascript">
        window.URL = window.URL || window.webkitURL;

        var fileSelect = document.getElementById("fileSelect"),
        fileElem = document.getElementById("fileElem"),
        fileList = document.getElementById("fileList");

        /*
            为了美观隐藏input，再将a标签的点击事件转移到input
        */
        fileSelect.addEventListener("click",function(e){
            if(fileElem){
                fileElem.click()
            }
            e.preventDefault();//阻止“#”跳转
        },false)



        function handleFiles(files){
            if(!files.length){
                fileList.innerHTML = "<p>No files selected！</p>"
            }else{
                fileList.innerHTML = '';
                var list = document.createElement('ul');//创建一个ul来展示
                fileList.appendChild(list);
                for(let i = 0;i<files.length;i++){
                    var li = document.createElement("li");
                    list.appendChild(li);
                    var img = document.createElement('img');

                    /*
                        设置图片的源为一个新的指代文件的对象URL，使用window.URL.createObjectURL() (en-US)来创建blob URL。
                    */
                    img.src = window.URL.createObjectURL(files[i]);

                    img.height = 60;

                    /*
                        设置图片的load事件处理器来释放对象URL，当图片加载完成之后对象URL就不再需要了。
                        这个可以通过调用window.URL.revokeObjectURL() (en-US)方法并且传递 img.src中的对象URL字符串来实现。
                    */
                    img.onload = function(){
                        window.URL.revokeObjectURL(this.src);
                    }

                    li.appendChild(img);

                    var info = document.createElement('span');//创建span展示文件相应信息
                    info.innerHTML = files[i].name +":"+files[i].size+"bytes";
                    li.appendChild(info);
                }
            }
        }
    </script>
</body>
</html>

使用对象URL显示PDF

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用对象URL显示PDF</title>
    <style type="text/css">
        #viewer{
            float: right;
            width: 1000px;
            height: 500px;
        }
    </style>
</head>

<body>
    <input type="file" onchange="handleFiles(this.files)">
      <!-- 使用iframe作为容器 -->
    <iframe id="viewer"></iframe>

    <script type="text/javascript">
        function handleFiles(files) {
            console.log(files);
            const obj_url = window.URL.createObjectURL(files[0]);
            const iframe = document.getElementById("viewer");
            iframe.setAttribute('src', obj_url);
            window.URL.revokeObjectURL(obj_url);
        }
    </script>
</body>

</html>
文章作者: 百念成诗
文章链接: https://www.eternitywith.xyz/posts/3f31.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 百念成诗 !
文件操作
赏
评论
  目录