用HTML5轻松实现图片预览
查看次数22815 发表时间2012-11-26 22:37:50
在网页中实现图片上传功能,当用户选择了图片文件后,想在页面中即时预览该图片,这个简单的需求在很久很久以前可以实现,后来因为安全性的问题被禁止直接访问本地文件了,所以又在很长很长一段时间里,想通过HTML直接预览用户选择的图片变得不可能,自从有了HTML5,这个功能又回来了,通过FileReader可以轻松的实现这个功能。
只要在<input type="file" />文件表单元素中监听 onchange 事件,然后通过FileReader读取图片文件,然后将读取的内容在<img>中显示即可。示例代码如下:
document.getElementById('file').onchange = function(evt) { // 如果浏览器不支持FileReader,则不处理 if (window.FileReader) return; var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { // img 元素 document.getElementById('previewImage').src = e.target.result; }; })(f); reader.readAsDataURL(f); } }
(转发请注明转自:学PHP)
相关推荐
- 关于HTML5 的canvas (2012-11-26 22:38:29)
- 解决浏览器碎片化,HMTL5大热成趋势 (2012-12-03 16:54:39)
- 2012年12月编程语言排行榜:Objective-C冲刺卫冕年度语言 【转载】 (2012-12-03 16:54:39)
- 如何使用HTML5实现利用摄像头拍照上传功能 (2012-12-03 23:23:14)
- 基于HTML5技术的Firefox OS手机或率先登陆日本 (2013-01-23 14:37:37)
- 关于html5的一些历史和优点 (2012-11-26 22:36:48)
- 各种详解HTML5 (2012-11-26 22:36:17)
- 6 款华丽的 HTML5 动画特效及源码 (2012-11-24 00:39:49)
- HTML5 WebSocket 技术介绍 (2012-11-24 00:30:09)
- 基于云计算的HTML5技术开发应用套件SALAMA (2012-11-21 14:54:40)
- 1楼 Marewan说: 2013-09-03 19:56:25
-
As Charlie Sheen says, this article is "WIGNINN!"
- 2楼 Humberto说: 2013-09-05 20:53:30
-
Ah yes, nicely put, evnoerey.
- 3楼 Tessa说: 2016-12-11 11:59:22
-
Yes, just incredibly painful and hurtful and it puts our ch;e1rlnRd7is, our friend’s, our loved one’s lives in danger. That’s the part that feels impossible. That’s the part that just adds more brutality to an already brutal situation.
- 4楼 Trish说: 2016-12-12 12:40:51
-
A bit sureirspd it seems to simple and yet useful.
发表评论