HTML5图片上传利用FileReader获取图片尺寸和图片预览

  • A+
所属分类:前端开发

HTML5图片上传利用FileReader获取图片尺寸和图片预览

背景

在图片上传时,通常会有大小、图片类型和图片尺寸等限制,并显示图片预览。

以前的处理方法:

1.通常是在服务器端保存图片之前做出判断;这样做的弊端是:占用服务器资源和带宽资源。

2.通过Flash插件(如:SWFUpload)在客户端直接限制用户上传;这样解决了第一种方法的弊端,但样式方面比较局限,不能灵活使用。

图片预览,则是成功上传之后,服务器返回正确的图片地址,在前端通过js动态设置img标签来实现预览功能。

解决方案

HTML5中,input的file对象获得了更多的权限来处理文件,JavaScript被允许获得文件的“文件名”、“大小”、“文件类型”等信息。并且可以通过FileReader读取到文件更多信息,如图片的宽和高。了解了这些就可以通过js在客户端直接获取图片的各种信息,通过判断图片信息来决定是否符合上传标准。

关于FileReader可以到w3c官网上查看更详细的介绍W3C- FileReader

HTML代码:

%ignore_pre_1%

JS代码:

%ignore_pre_2%

完整实例下载

链接: https://pan.baidu.com/s/1pLf5MVx 密码: 34wa

 标签:  ,

该文章由WP-AutoPost插件自动采集发布

原文地址:https://wuzhuti.cn/2570.html

weinxin
我的微信
这是我的微信

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: