Download files and preview pictures

Download files

a The label specifies download Property will download the link to jump , The premise is homology

<h2> Front-end blob object  ---  Download files  &&  Preview of the picture </h2>
<br>
<a id="btn"> Download the file </a>
<script> var str = ` <div> <p> Download files </> </div> `; var blob = new Blob([str], {
       type: 'text/html' }); btn.onclick = function (e) {
       this.setAttribute('download', '123.html'); this.href = URL.createObjectURL(blob); } </script>

Preview of the picture

    <input type="file" id="input1">
    <input type="file" id="input2">
    <script> //  Sync  input1.onchange = function (e) {
       var file = e.target.files[0]; var img = new Image(); img.src = URL.createObjectURL(file) document.body.appendChild(img) } //  asynchronous  input2.onchange = function (e) {
       var file = e.target.files[0]; var img = new Image(); var fileRead = new FileReader(); document.body.appendChild(img) fileRead.onload = function () {
       img.src = fileRead.result } fileRead.readAsDataURL(file) } </script>