JS实现上传本地图片前先预览

来源：互联网发布：程序员饱和了吗编辑：程序博客网时间：2024/05/17 19:23
<style type="text/css">   
#preview   /*这个就是预览的DIV的ID*/    
{    
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);    
} 
</style>    
   
<script type="text/javascript"> 
<!--    
function preview(img,width,height){    
    var newPreview = document.getElementById("preview");    
    var url = img.value;    
   
    var fileext=url.substring(url.lastIndexOf("."),url.length);       
    fileextfileext=fileext.toLowerCase();    
    if((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.jpeg')&&(fileext!='.png')&&(fileext!='.bmp')){    
        alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传！");      
        document.applyForm.upload.focus();    
        document.getElementById("sub").disabled=true;       
    }else{    
            document.getElementById("sub").disabled=false;    
            newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;    
            newPreview.style.width = width+"px";    
            newPreview.style.height = height+"px";     
    }    
}    
//--> 
</script>    
   
<input type="file" name="upload" onchange="preview(this,300,200)" /> 
<div id="preview"></div><br/>    
<input type="submit" value="提交" id="sub" disabled="true"/>
0 0