JS上传文件前预览本地图片

例子如下： < input id="file" type="file" onfocus="javascript:ShowImage(this.value,document.getElementById('img'))"> < br /> < img id="img" STYLE="visibility:hidden" height="100px" width="100px"> < script language="javascript" type="text/javascript"> //============================== //功能:Javascript本地图片预览 //说明:简单的判断了文件的合法性 //适用于:上传文件前预览本地图片 //============================== function ShowImage(value,img) { //alert(value); //检测盘符 //alert(value.indexOf(':')); //检测文件是否有扩展名 //alert(value.length-value.lastIndexOf('.')); //取文件扩展名 //alert(value.substr(value.length-3,3)); //检测文件扩展名是否合法 //alert(CheckExt(value.substr(value.length-3,3))); if(value.length>5&&value.indexOf(':')==1&&(value.length-value.lastIndexOf('.'))==4&&CheckExt(value.substr(value.length-3,3))) { img.src=value; img.alt="本地图片预览"; img.style.visibility="visible"; } else { img.style.visibility="hidden"; } } //检查扩展名是否合法,合法返回True function CheckExt(ext) { //这里设置允许的扩展名 var AllowExt="jpg|gif|jpeg|png|bmp"; var ExtOK=false; var ArrayExt; if(AllowExt.indexOf('|')!=-1) { ArrayExt=AllowExt.split('|'); for(i=0;i<ArrayExt.length;i++) { if(ext.toLowerCase()==ArrayExt[i]) { ExtOK=true; break; } } } else { ArrayExt=AllowExt; if(ext.toLowerCase()==ArrayExt) { ExtOK=true; } } return ExtOK; } < /script> 使用new创建对象的过程。 （1）当解释器遇到new操作符时便创建一个空对象； （2）开始运行class1这个函数，并将其中的this指针都指向这个新建的对象； （3）因为当给对象不存在的属性赋值时，解释器就会为对象创建该属性，例如在class1中，当执行到this.p1=s这条语句时，就会添加一个属性p1，并把变量s的值赋给它，这样函数执行就是初始化这个对象的过程，即实现构造函数的作用； （4）当函数执行完后，new操作符就返回初始化后的对象。 通过这整个过程，JavaScript中就实现了面向对象的基本机制。由此可见，在JavaScript中，function的定义实际上就是实现一个对象的构造器， prototype是一个JavaScript对象，可以为prototype对象添加、修改、删除方法和属性。从而为一个类添加成员定义。 了解了函数的prototype对象，现在再来看new的执行过程。 （1）创建一个新的对象，并让this指针指向它； （2）将函数的prototype对象的所有成员都赋给这个新对象； （3）执行函数体，对这个对象进行初始化操作； （4）返回（1）中创建的对象。 和上一节介绍的new的执行过程相比，多了用prototype来初始化对象的过程，这也和prototype的字面意思相符，它是所对应类的实例的原型。这个初始化过程发生在函数体（构造器）执行之前，所以可以在函数体内部调用prototype中定义的属性和方法，