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>