图片上传预览功能

采用jquery以及js实现了途片上传预览，兼容ie6，ie7，ff

代码如下

function sanshi_previewimage(upload_id,show_pic_id){ //图片宽度 this.pic_width ="125px"; //图片高度 this.pic_height="125px"; $("#"+show_pic_id).hide(); $("#"+show_pic_id).append("<img style='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:"+this.pic_width+";height:"+this.pic_height+";'>"); $("#"+upload_id).change(function(){ //检测文件类型 if(!$(this).val().match(/.jpg|.gif|.png|.bmp/i)){ alert('图片类型必须是: .jpg, .gif, .bmp or .png !'); return; } if($(this).get(0).files) { $("#"+show_pic_id+" img").attr("src",$(this).get(0).files[0].getAsDataURL()); }else{ var newPreview = $("#"+show_pic_id+" img").get(0); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=$(this).get(0).value; } $("#"+show_pic_id).show(); }); } $(document).ready(function(){ sanshi_previewimage("upload","show_pic"); });

 

html代码如下

<div id="show_pic"></div> <input type='file' id="upload">