关于javascript:前端文件操作

42次阅读

共计 1653 个字符，预计需要花费 5 分钟才能阅读完成。

1. 在文本域中输出文本，而后存在文件中，点击下载按钮，即可把文件下载下来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >
    <textarea id="textarea"></textarea><a id="downLoad"> 把文本域中的文本存储到文件中，点击此按钮能够下载这个文件 </a>
    <script>  
        downLoad.onclick = function(){
            let textareaVal = textarea.value;
            // 把文本域中的字符串转化成二进制字符串
            const blob = new Blob([textareaVal],{type:'text/html'});
            console.log('blob', blob);
            // 把二进制内容生成一个连贯
            downLoad.href = URL.createObjectURL(blob);
            downLoad.setAttribute('download', 'index.html');
        }
    </script>
</body>
</html>

2. 点击上传文件，把图片上传，并且显示进去（办法一：读取文件内容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file">
    <script>
        // 办法一：读取图片文件，而后把图片显示进去
        file.addEventListener('change', (e)=>{let file = e.target.files[0]; // 二进制文件内容
            console.log(file);
            // 异步写法
            let fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = function(){console.log(fileReader.result);
                let img = document.createElement('img');
                img.src = fileReader.result;
                document.body.appendChild(img);
            }
        });
    </script>
</body>
</html>

3. 点击上传文件，把图片上传，并且显示进去（办法二：把文件作为一个路劲，把路劲给 src 显示~~~~）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file">
    <script>
        // 办法一：读取图片文件，而后把图片显示进去
        file.addEventListener('change', (e)=>{let file = e.target.files[0]; // 二进制文件内容
            // 同步写法
            let url = URL.createObjectURL(file);
            console.log(url);
            let img = document.createElement('img');
            img.src = url;
            document.body.appendChild(img);
        });
    </script>
</body>
</html>

正文完