易截截图软件、单文件、免安装、纯绿色、仅160KB

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" :
     &


相关文档:

javascript中replace的正则表达式语法

replace
方法
以下是javascript
中的例子
下面的示例演示了 replace
方法将第一次出现的单词 "The"
替换为单词 "A"
的用法。
function ReplaceDemo(){
   var r, re;                 & ......

Javascript和Ajax中文乱码吐血版解决方案

引自:http://www.cnblogs.com/dongritengfei/archive/2009/12/21/1628489.html
 
今天弄了一天的Ajax中文乱码问题,Ajax的乱码问题分为两种:
1. JavaScript输出的中文乱码,
比如:alert("中文乱码测试");
解决的办法比较简单,就是把jsp里所有的charset和pageEncoding的值都设置成相同的,一般是utf-8.
  ......

javascript 中数组使用方法汇总

/*
 由于javascript是一种无类型语言,所以一个数组的元素可以具有任意的数据类型,同一个数组的不同元素
 可以具有不同的类型,数组的元素设置可以包含其他数组,这样就可以创建一个复杂的数组了.
 并且在这点上说javascript作为一种脚本语言不同于那种严格的面向对象的c++.c#,java了.具有更高的灵活性.
&n ......

javascript拼图游戏

拼图游戏,在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> ......

用javascript控制框架的src属性

<input   type=button   onclick="aaa();"   value="确定">  
  <iframe   name="frame1">  
  <script   language=javascript>  
  function   aaa()  
  {  
  docume ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号