美文网首页
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

    FileReader接口的方法FileReader接口有4个方法,其中3个用来读取本地文件,另一个用来中断读取。无...

  • HTML5 表单属性

    HTML5 新的表单属性HTML5的 和 标签添加了几个新的属性新属性:1.autocomplete2...

  • HTML5常用的标签

    目录: HTML5新结构标签 HTML5新其他标签 HTML5新input类型 HTML5新属性 HTML5高级应...

  • HTML5表单新验证属性、状态

    HTML5 - 表单新验证属性 HTML5 - 表单新验证状态

  • HTML5 表单属性

    HTML5 的新的表单属性 本章讲解涉及 和 元素的新属性。 新的 form 属性: autocomple...

  • 为HTML5 placeholder占位文字添加css样式

    placerholder属性是HTML5中的新属性。 定义和用法: placeholder属性提供可描述输入...

  • HTML5表单

    Html5增加了一些新的特性 form属性Html5之前所有的表单属性都要放到form里面,新增了form属性后,...

  • textarea

    属性 New:HTML5 中的新属性。 下面就单个属性进行讲解 autofocus 自动聚焦 required i...

  • JS:day07

    一、className属性 给元素添加一个新的class属性, 二、HTML5 创建画布

  • HTML5中form如何关闭自动完成功能

    什么是HTML5的form自动完成功能? 首先,HTML5 中有个新属性autocomplete ,autocom...

网友评论

      本文标题:html5新属性previewFile

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