ie图片上传滤镜_第1页
ie图片上传滤镜_第2页
ie图片上传滤镜_第3页
ie图片上传滤镜_第4页
ie图片上传滤镜_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

图片上传预览是一种在图片上传之前对图片进行本地预览的技术。使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。不过群众的智慧是无限的，网上已经有很多没有办法实现本地预览，只能通过后台来支持预览。【基本原理】图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。程序的file和img属性就是用来保存L如果用能力检测会比较麻烦，所以只用了浏览器检测。由于浏览器对应的默认模式是不会变的，这个值会保存到函数属性中作【获取数据】调用preview方法，就会执行预览程序：if(this.file&&false!==thisthis._preview(thisthis._getData?=this._getDataFun(opt.mode);mode的默认值是ImagePreview.MODE，也可以在可选参数中自定义。由于兼容性问题，一般应保留默认值，除非是使用全兼容代码switchcase"filter"returnthiscase"domfile"returnthiscase"remote"returnthiscase"simple"defaultreturnthis不同的模式有不同的数据获取程序：滤镜数据获取程序：select，不过一般能选择文件就肯定能被select了。确实要隐藏也可以在获取数据之后再隐藏。this._setUpload();this._upload&&this._upload.upload();用_upload上传文件对象把数据提交后台，根据返回的数据再显示。这个方法不属于本地预览，是没有办法中的办法。获取数据后，作为_preview预览程序的参数，再进行处理：if(!!data&&data!==thisthis._data=data;this首先排除空值或相同值的情况，再执行_show程序进行显示预览，其中_data属性用来保存当前的图片数据。图片使用DataURI远程数据获取程序没有返回值，因为它需要等待返回数据，在_preview中会自动排除。【显示预览】this._show=opt.mode!=="filter"this._simpleShow:this._filterShow;除了filter模式，都是使用_simpleShow显示程序来显示预览图片的。里面会先调用_simplePreload方法设置一般预载图片代码if(!thisvarpreload=this._preload=newImage(),oThis=this=function(){oThis._imgShow(oThis._data,this.width,thisthis._onload=function(){this.onload=null;onload.call(this=$$B.iethis._onload:onload;preload.onerror=functionelseifthis._preload.onload=this预载图片对象保存在_preload属性中，主要用来判断图像能否加载成功并获取图片原始尺寸。要实现这些功能使用Image对象naturalHeight和naturalWidth属性可以获取图片的原始尺寸，即使图片尺寸已经修改过。g代码<!DOCTYPEhtml><body><imgid="img"/><divid="div"></div></body><script></script>sie设置之前就加载完成的话就触发不了事件了。imgShowsrcimgShow尺代码Math.round(width*ratio)+"px"=Math.round(height*ratio)+"px";这里的关键是获取ratio比例值，如果自定义的ratio大于0就直接使用自定义的比例，否则就根据参数自动计算。自动计算hmaxHeight表示不限制，那么比例就自动改为1。最后取比较小的比例来计算，程序设定了比例最大值为1，这样就不会自动放大图片了。当然比例的计算可以根据需要自行修改。ps：style的优先级比属性(width/height)高，所以要用style设置。remote模式会先提交file控件到后台，通过返回的数据来显示图片。它跟其他模式最大的区别就是获取数据的部分。在_remoteData远程数据获取程序中，会调用_setUpload来设置上传文件对象。如果设置了action，并存在QuickUpload函数，就会实例化一个上传文件对象保存到_upload中：代码varoThis=this;this._upload=newQuickUpload(thisfunctionthis.action=oThis.action;this.timeout=varparameter=this.parameter;parameter.ratio=oThis.ratio;parameter.width=oThis.maxWidth;parameter.height=oThis.maxHeight;},onFinish:functiontry{}catch(e){oThis._error("remoteerror"function(){oThis._error("timeouterror"行出错处理。返回的数据可以是图片的地址或对应的DataURI数据，然后给_preview处理。当然针对不同的后台输出，数据处理的方式也不同，可以按照需要修改。后台最好先根据传递的参数缩小图片，尽量减少返回数据来提高预览速度。filter模式在_filterData程序中得到文件本地路径，但ie7/8都不允许直接使用本地路径显示图片。不过还是可以通过滤镜，用本地路径来做预览图片效果。filter模式使用_filterShow方法来显示预览图片。里面先调用_filterPreload方法来设置滤镜预载图片对象。跟一般预载图代码varpreload=this._preload=document.createElement("div");$$D.setStyle(preload,{});varbody=document.body;body.insertBefore(preload,body.childNodes[0]);在样式设置中隐藏元素并添加滤镜，要使滤镜生效width和height必须设置一个值。由于要获取尺寸，只能用visibility来注意，如果路径中有“)”，“%”这类字符的话，直接拼接到滤镜字符串中会出现类似sql注入的问题。程序会先对这些敏感data=this._data.replace(/[)'"%]/g,function(s){returnescape(escape(s));});为什么要做两次escape编码呢？测试时发现“%”只转一次的话，遇到“%40”之类的字符时还是会出问题。所以我推测，字还要注意预览对象不要用filters.item的方式设置滤镜。因为元素插入文档之前，并不能通过filters.item获取滤镜对象，lter用_imgShow设置尺寸：this._imgShow(ImagePreview.TRANSPARENT,preload.offsetWidth,preload.offsetHeight);由于img是一个图片对象，默认会显示一个小图标，为了去掉这个小图标，可以让它显示一个透明图片。程序传递了div预览图片对象就没有小图标了，但这样兼容起来会麻烦很多。【AlphaImageLoader滤镜】filter模式使用的是AlphaImageLoader滤镜。它的作用是在对象容器边界内，在对象的背景和内容之间显示一张图片。如果和“Microsoft.AlphaImageLoader滤镜讲解”。它包括三个属性：enabled(滤镜是否激活)，sizingMethod(图像显示方式)和src(图像路径)。程序主要使用后面两个属性。sizingMethodcrop寸；image：默认值。增大或减小对象的尺寸边界以适应图片的尺mageimgIE语法：filter:(enabled=bEnabled,sizingMethod=sSize,src=sURL)enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|falsetrue:默认值。滤镜激活。false:滤镜被禁止。sizingMethod:可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop:剪切图片以适应对象尺寸。image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale:缩放图片以适应对象的尺寸边界。src:必选项。字符串(String)。使用绝对或相对url地址指定背景图像。假如忽略此参数，滤镜将不会作用。Enabled。布尔值(Boolean)。参阅enabled属性。在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNGPortableNetworkGraphics明度也被提供。PNG(PortableNetworkGraphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(PortableNetworkGraphics)格式的图片完全透明区域后面的内容。#idDiv{position:absolute;left:140px;height:400;MSDN:P.S.当想使用backgroundimage属性时，如果不想让图片原尺寸显示，而是类似于IMGwidth=100%heigth=100%的效果，可以通Example：sizingMethod='scale')";其实想到的话,也很简单了.就是先让FF正常显示该图片,然后,用*或_来清除IE下的显示效果，最后用*或_来做以上的滤镜效成！以上是官方的说明。事实上实际操作中需要注意:AlphaImageLoader滤镜会导致该区域的链接和按钮无效，一般情况下的解决办法是为链接或按钮添加：position:relative使其相对浮动要注意的是，当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议使用浮动办法处理。为预览区域(比如要在某个div中预览)添加样式：。}【nsIDOMFile接口】ff从3.0(或许更早)开始，就不能通过file控件的value属性获取文件本地路径，也不支持直接用本地路径显示图片。不DOMFilefffileFileListnsIDOMFile接口的File对象。ps：FileList对象貌似是一个NodeList集合，但目前只能用第一个，可能是为了将来实现一URLDataURIURLgetAsBinary：获取文件的二进制数据。其中getAsDataURL获得的DataURI数据可以用于显示图File对象还支持两个属性：fileName(文件名，不包括路径)和fileSize(文件大小)。相关具体说明参考mozilla的File上面已经多次提到DataURI，详细介绍请看秦歌的“DataURI和MHTML”。DataURI的主要作用是以字符代替数据，从而把文件“嵌”在代码里。除了ie，其他浏览器基本都很好的支持了DataURI。ie8也有限度地支持，详细参考msdn的dataProtocol。operasafarichromeremoteDataURI是DataURI形式的数据。相比返回terimgdata:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==代码Content-Type:multipart/related;boundary="_CLOUDGAMER"----Transfer-Encoding:base64R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAABAAEAAAICVAEAOw==其中boundary的值是分隔符标识，说明用于分隔数据段的字符。Content-Location说明关联引用位置，可以用作数据段的标然后在代码中这样调用(例如设置img元素的src属性)：mhtml:文件完整路径!blankImage就可以链接到一个透明图片了。接着就要解决如何获得script(js文件)的完整路径(包含http开头的路径)的问题了。首先要在脚本运行时获取，当前运ps：ff不支持document.scripts，可以用getElementsByTagName("script")来兼容。使用技巧RANSPARENTBieBie使用时要注意：脚本必须单独另存为一个文件，作为mhtml需要的文件路径。要自动获取完整路径需要用script标签链接文【超空间】有一个dispose方法用于销毁程序。包括这几个部分：_upload上传文件对象：它本身已经有一个dispose方法来销毁ll序创建的元素，留给使用者来移除。说到移除元素，顺便说一下超空间(DOMhyperspace)，这是从“ppk谈javascript”中看到的。大概指的是当元素不在dom里面，而js又有关联时，元素并不会消失，而是保存在一个称为“超空间”的地方。详细参考书的DOM超空间部分。书中还<body></body><script>varelm=document.createElement("div");alert(elm.parentNode);alert(elm.parentNode);</script>parentNodenull应该是null，但ie却是一个object。经测试，这个object的nodeType是11，也就是一个碎片对象(FRAGMENT)。而且各个被removeChild移除的元素的parentNode都不相同，即会生成不同的碎片对象。这种情况算不算在“超空间”呢，不过书中也只是说“一般来说”，也不用太考究。<body><divid="test"></div></body><script>varelm=document.getElementById("test"=""</script>那个碎片对象貌似没什么用(难道为了保证有parentNode)，那是不是innerHTML就一定比removeChild好呢再测试以下代码：代码<body><style>div{border:1pxsolid#000;height:20px;}</style><span><divid="test1">test1</div></span><span><divid="test2">test2</div></span></body><script>vardiv1=document.getElementById("test1"),parent1=div1.parentNode;parent1.removeChild(div1);alert(div1.tagName+":"+div1.innerHTML);parent1.appendChild(div1);vardiv2=document.getElementById("test2"),parent2=div2.parentNode;parent2.innerHTML=""+":"+div2.innerHTML);parent2.appendChild(div2);</script>个人推测，ie在使用innerHTML时，被移除的元素会变成一个个单独的元素，失去了彼此的联系。形象点说就是removeChild是直接掰断树枝，还能继续嫁接使用，而innerHTML是把需要的树叶节点取下来，再把树枝烧掉。ps：仅仅是推测，谁有官方资料请告诉我。的好处是不会产生多余的碎片对象，方便高效，但在ie被移除的元素基本不能再用，有兼容性问题。那就可以根据需要使用不同的方法了，至于防止内存泄漏用那个好，感觉是innerHTML，但没有更深入研究的话还说不清楚。一般来preview方法都是在onchange中调用，即选择文件后立即显示预览。在不需要程序时最好执行一次dispose方法来销毁程序，防止内存泄漏等。利用ImagePreview.TRANSPARENT可以显示透明图片，而不需另外隐藏或增加文件。使用说明newImagePreview(file,img);可选参数用来设置系统的默认属性，包括：属性:默认值//说明mode:ImagePreview.MODE,//预览模式ratio:0,//自定义比例maxWidth:0,//缩略图宽度maxHeight:0,//缩略图高度onCheck:function(){},//预览检测时执行onShow:function(){},//预览图片时执行onErr:function(){},//预览错误时执行以下在remote模式时有效action:undefined,//设置ontimeoutremoteaction程序源码代码varImagePreview=functionthis.file=$$(file);//文件对象this.img=$$(img);//预览图片对象this._preload=null;//预载图片对象this._data="";//图像数据this._upload=null;//remote模式使用的上传文件对象varopt=thisthis.action=this.timeout=this.ratio=this.maxWidth=this.maxHeight=this.onCheck=this.onShow=this.onErr=//设置数据获取程序this._getData=this//设置预览显示程序this._show=opt.mode!=="filter"this._simpleShow:this//根据浏览器获取模式riremotesimpleImagePreview.TRANSPARENT=$$B.ie7||$$B.ie6设置默认属性_setOptions:functionthis.options={//默认值mode:ImagePreview.MODE,//预览模式ratio:0,//自定义比例maxWidth:0,//缩略图宽度maxHeight:0,//缩略图高度onCheck:function(){},//预览检测时执行onShow:function(){},//预览图片时执行onErr:function(){},//预览错误时执行置)return$$.extend(this.options,options||//开始预览preview:functionif(this.file&&false!==thisthis._preview(this//根据mode返回数据获取程序_getDataFun:functionswitchcase"filter"returnthiscase"domfile"returnthiscase"remote"returnthiscase"simple"defaultreturnthis//滤镜数据获取程序},//domfile数据获取程序远程数据获取程序_remoteData:functionthisthis._upload&&this//一般数据获取程序_simpleData:functionreturnthis//设置remote模式的上传文件对象_setUpload:functionif(!this._upload&&this.action!==undefined&&typeofQuickUpload==="function"varoThis=thisthis._upload=newQuickUpload(this.file,{onReady:functionthis.action=oThis.action;this.timeout=varparameter=this.parameter;parameter.ratio=oThis.ratio;parameter.width=oThis.maxWidth;parameter.height=oThis.maxHeight;},onFinish:functiontry{}catch(e){oThis._error("remoteerror");}},onTimeout:function(){oThis._error("timeouterror"//预览程序_preview:function//空值或相同的值不执行显示if(!!data&&data!==thisthis._data=data;this//设置一般预载图片对象_simplePreload:functionif(!thisvarpreload=this._preload=newImage(),oThis=this=function(){oThis._imgShow(oThis._data,this.width,thisthis._onload=function(){this.onload=null;onload.call(this=$$B.iethis._onload:onload;preload.onerror=function(){oThis._error();};}elseifthis._preload.onload=this//一般显示_simpleShow:functionthisthis._preload.src=this//设置滤镜预载图片对象_filterPreload:functionif(!thisvarpreload=this._preload=document.createElement("div"//隐藏并设置滤镜$$D.setStyle(preload,{插入bodyvarbody=document.body;body.insertBefore(preload,body.childNodes[0//滤镜显示_filterShow:functionthisvarpreload=this=this._data.replace(/[)'"%]/g,function(s){returntry{设置滤镜并显示},//显示预览gstyleMathmaxthisratioMathminthismaxWidthwidththismaxHeight)/height||1//设置预览尺寸style.width=Math.round(width*ratio)+"px"=Math.round(height*ratio)+"px"//设置srcimg.src=this//销毁程序dispose:function//销毁

人人文库> 全部分类> 办公材料 > 办公文档

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论