JavaScript 图片预览效果
随着浏览器安全性的提高,要实现图片预览也越来越困难。
不过群众的智慧是无限的,网上也有很多变通或先进的方法来实现。
在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。
上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果。
兼容:ie6/7/8, firefox 3.5.5
后台支持下还兼容:opera 10.10, safari 4.0.4, chrome 3.0
效果预览请看这里
完整实例下载(asp.net版)
完整实例下载(asp版)
程序说明
【基本原理】
图片预览主要包括两个部分:从file表单控件获取图像数据,根据数据显示预览图像。
程序的file和img属性就是用来保存file控件和显示预览图像的容器的,而img还必须是img元素。
程序有以下几种预览方式:
simple模式:直接从file的value获取图片路径来显示预览,适用于ie6;
filter模式:通过selection获取file的图片路径,再用滤镜来显示预览,适用于ie7/8;
domfile模式:调用file的getAsDataURL方法获取Data URI数据来显示预览,适用于ff3;
remote模式:最后的办法,把file提交后台处理后返回图片数据来显示预览,全适用。
程序定义时就自动根据浏览器设置MODE属性:
ImagePreview.MODE = $$B.ie7 || $$B.ie8 ? "filter" :
$$B.firefox ? "domfile" :
$$B.opera || $$B.chrome || $$B.safari ? "remote" : "simple";
如果用能力检测会比较麻烦,所以只用了浏览器检测。
由于浏览器对应的默认模式是不会变的,这个值直接会保存到函数属性中作为公用属性。
ps:ie6也可以用filter模式,不过它有更好的simple模式。
【获取数据】
调用preview方法,就会执行预览程序:
if ( this.file && false !== this.onCheck() ) {
this._preview( this._getData() );
}
在通过检测后,再调用_getData获取数据,并作为_preview的参数进入预览下一步。
程序初始化时就会根据mode来设置_getData数据获取程序:
this._getData = this._getDataFun(opt.mode);
mode的默认值是ImagePreview.MODE,也可以在可选参数中自定义。
由于兼容性问题,一般应保留默认值,除非是使用全兼容的remote模式。
在_getDataFun里面,根据mode返回数据获取程序:
switch (mode) {
case "filter" :
return this._filterData;
case "domfile" :
&
相关文档:
//设置当前页面为用户的首页
function setHomepage()
{
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage(window.location.href);
event.returnValue=false;
return;
}
//加入收藏
function addFavorite()
{
&nb ......
拼图游戏,在ie7 ,火狐,谷歌 测试通过。
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title> ......
东西很简单,只是自己记性不好,经常忘记一些关键字
所以发了点时间整理了一下
/*------------------------------------------------------
*作者:xieyu @ 2007-08-14
*语言:JavaScript
*说明:select元素javascript常用操作
* 1.判断是否存在指定value的Item
* 2.加入一 ......
CDATA 内部的所有东西都会被解析器忽略。
假如文本中包含了大量的 "<" 和 "&" 字符 - 就像编程代码中经常出现的情况一样 - 那么这个 XML 元素就可以被定义为一个 CDATA 部分。
CDATA 区段开始于 "<![CDATA[",结束于 "]]>":
<script type="text/javascri ......
一、普通打印(整页打)
二、打印网页内部分内容(自定义)
三、打印去掉/添加页眉页脚
四、使用外部控件/方法实现多功能打印 &nb ......