圖片上傳預覽功能

採用jquery以及js實現了途片上傳預覽，相容ie6，ie7，ff

代碼如下

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

 

html代碼如下

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