html5新属性previewFile

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]); 
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,187评论 6 13
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,779评论 18 399
  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,656评论 8 265
  • 大雪节气已过,气温也渐趋负数,小区里的银杏叶经过一夜风吹,有些只剩零星的几片叶,仿佛待最后华丽的旋转、凋落。天气晴...
    卿莹阅读 207评论 0 1
  • 认识"冥想" 其实几年前就已经听说过"冥想"这种东西了。家里的小姑姑师从台湾师父,专门把自己办公室的其中一间弄成禅...
    肖雨酱阅读 1,025评论 0 1