zoukankan      html  css  js  c++  java
  • 使用fileReader实现图片预览

    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,

    使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,

    也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果.

    <input type="file">
    <
    br> <img src="" alt="">
    var fileInput=document.querySelector('input[type=file]');
        var viewImg=document.querySelector('img');
        fileInput.addEventListener('change',function(){
            //console.log(this.files[0]);
            var file=this.files[0];
            var reader=new FileReader();
            reader.addEventListener('load',function(){
                console.log(reader.result);
                viewImg.src=reader.result;
            },false);
            reader.readAsDataURL(file);
        },false);
    不积跬步,无以至千里;不积小流,无以成江海。
  • 相关阅读:
    回溯算法总结
    第四章总结
    第四章编程总结
    动态规划总结:
    第三章实践心得
    分治算法体会
    第二章上机实践总结
    代码规范与《数学之美》读后感
    第二次c++作业
    第一次博客作业
  • 原文地址:https://www.cnblogs.com/caoruichun/p/7691089.html
Copyright © 2011-2022 走看看