用HTML5轻松实现图片预览
在网页中实现图片上传功能,当用户选择了图片文件后,想在页面中即时预览该图片,这个简单的需求在很久很久以前可以实现,后来因为安全性的问题被禁止直接访问本地文件了,所以又在很长很长一段时间里,想通过HTML直接预览用户选择的图片变得不可能,自从有了HTML5,这个功能又回来了,通过FileReader可以轻松的实现这个功能。
只要在< input type ="file" / >文件表单元素中监听 onchange 事件,然后通过FileReader读取图片文件,然后将读取的内容在中显示即可。示例代码如下:
// 如果浏览器不支持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);
}
}
via:http://blog.csdn.net/varkychan/article/details/8223979
【用HTML5轻松实现图片预览】相关文章
2. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
4. Nunchuck.js - 轻松实现多个设备的数据同步
5. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
7. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
8. FullPage.js:轻松实现全屏滚动(单页网站)效果
本文来源:https://www.51html5.com/a666.html
﹝用HTML5轻松实现图片预览﹞相关内容
- Shepherd – 在应用程序中轻松实现引导功能
- CSS3 animate实现图片墙3D翻转效果
- 用纯CSS3实现图片幻灯片切换效果
- 10款响应式 jQuery实现图片效果插件
- HTML5组件Canvas实现图像灰度化(步骤+实例效果)
- jQuery可放大预览的图片滑块插件
- jQuery图片放大预览插件
- HTML5 Maker – 在线轻松制作 HTML5 动画效果
- Javascript SDK:轻松开发HTML5应用的必备工具
- HTML5标准最新技术预览