Javascript图片上传前的本地预览实例
图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子。
原理:
分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL);把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。
在这里,我们需要了解Javascript里File对象、Blob对象和window.URL.createObjectURL()方法。
File对象:
File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的DataTransfer对象.
下面来看获取FileList对象:
<scripttype="text/javascript"src="jquery.js"></script> <inputid="upload"type="file"> <imgid="preview"src=""> <scripttype="text/javascript"> $('#upload').change(function(){ //获取FileList的第一个元素 alert(document.getelementbyid('upload').files[0]); }); </script>
Blob对象:
一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.
我们想要得到的对象URL实际上就是从Blob这个对象获取的,因为File的接口继承Blob。下面就来把Blob对象转换成URL:
<scripttype="text/javascript"> varf=document.getelementbyid('upload').files[0]; varsrc=window.URL.createObjectURL(f); document.getElementById('preview').src=src; </script>
兼容性:
上述方法适用于chrome浏览器
如果是IE浏览器可以直接使用input的value来代替src
网上查看资料有直接使用File对象的getAsDataURL()方法获取URL的,现在这个方法都已经废除,类似的还有getAsText()和getAsBinary()方法,我们来看这样一个例子。
functiongetFullPath(obj){ //得到图片的完整路径 if(obj){ //ie if(window.navigator.userAgent.indexOf("MSIE")>=1){ obj.select(); returndocument.selection.createRange().text; } //firefox elseif(window.navigator.userAgent.indexOf("Firefox")>=1){ if(obj.files){ returnobj.files.item(0).getAsDataURL(); } returnobj.value; } returnobj.value; } }
这段代码是获取客户端图片的完整路径
我们再限制其大小和格式
$("#loadFile").change(function(){ varstrSrc=$("#loadFile").val(); img=newImage(); img.src=getFullPath(strSrc); //验证上传文件格式是否正确 varpos=strSrc.lastIndexOf("."); varlastname=strSrc.substring(pos,strSrc.length) if(lastname.toLowerCase()!=".jpg"){ alert("您上传的文件类型为"+lastname+",图片必须为JPG类型"); returnfalse; } //验证上传文件宽高比例 if(img.height/img.width>1.5||img.height/img.width<1.25){ alert("您上传的图片比例超出范围,宽高比应介于1.25-1.5"); return; } //验证上传文件是否超出了大小 if(img.fileSize/1024>150){ alert("您上传的文件大小超出了150K限制!"); returnfalse; }
其中,loadFile是htmlinputfile的id。在它的change事件,也就是选择了要上传的文件以后,让图片显示在图片框里吗,在上面代码的最后加上以下代码
$("#stuPic").attr("src",getFullPath(this));
既然用到了jQuery,下面我们再分享一个用jQuery的写的代码实例:
<htmlxmlns="http://www.w3.org/1999/xhtml"> <headid="Head1"> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <scripttype="text/javascript"src="jquery.js"></script> <scriptlanguage="javascript"> $(function(){ varei=$("#large"); ei.hide(); $("#img1").mousemove(function(e){ ei.css({top:e.pageY,left:e.pageX}).html('<imgstyle="border:1pxsolidgray;"src="'+this.src+'"/>').show(); }).mouseout(function(){ ei.hide("slow"); }) $("#f1").change(function(){ $("#img1").attr("src","file:///"+$("#f1").val()); }) }); </script> <styletype="text/css"> #large{position:absolute;display:none;z-index:999;} </style> </head> <body> <formname="form1"id="form1"> <divid="demo"> <inputid="f1"name="f1"type="file"/> <imgid="img1"width="60"height="60"> </div> <divid="large"></div> </form> </body> </html>