美文网首页
html5新属性previewFile

html5新属性previewFile

作者: milletmi | 来源:发表于2018-09-27 20:22 被阅读0次

    FileReader接口的方法
    FileReader接口有4个方法,其中3个用来读取本地文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。
    FileReader接口的方法

    方法名 参数 描述
    readAsBinaryString file 将文件读取为二进制编码
    readAsText file,[encoding] 将文件读取为文本
    readAsDataURL file 将文件读取为DataURL
    abort (none) 终端读取操作

    读取上传的文件的尺寸以及大小

    demo地址
    html

    <input type="file" onchange="previewFile(this)">
    

    js

    function previewFile(targetInput){
        console.log(targetInput.files[0].size / (1024*2)+'M=================>')
        console.log(targetInput.value)   
        var reader = new FileReader(); 
        reader.addEventListener("load", function () {
             //加载图片获取图片真实宽度和高度    
             var image = new Image();    
             image.onload=function(event){    
                 var width = image.width;    
                 var height = image.height;    
                 console.log(event)
                 console.log(width)
                 console.log(height) 
             };    
             image.src= reader.result;
          }, false);
          reader.readAsDataURL(targetInput.files[0]); 
    }
    

    相关文章

      网友评论

          本文标题:html5新属性previewFile

          本文链接:https://www.haomeiwen.com/subject/ubjyoftx.html