JavaScript 图片上传预览效果

该文档说了怎么在页面做图片预览, 一步一步的

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术。

使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。

但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。

例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。

但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。 在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。

上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果的。 兼容：ie6/7/8, firefox 3.5.5

后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0

效果预览

ps：兼容opera, safari和chrome需要后台支持，请下载实例测试。

程序说明

【基本原理】

图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。

程序的file和img属性就是用来保存file控件和显示预览图像的容器的，而img还必须是img元素。