上传图片前的预览

转载 2006年06月22日 15:21:00
点击浏览后自动在页面显示预览效果。自己试着写了下。
关键是利用file对象的onchange事件,并且要判断上传的格式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  
<title></title>
</head>
<body>
<script type="text/javascript">
function previewPic(){
    img
=document.getElementById("f");
    
if(img){
        imgext
=img.value.substring(img.value.indexOf('.'),img.value.length);
        imgext
=imgext.toLowerCase();
        
if(imgext!='.bmp'&&imgext!='.jpg'&&imgext!='.jpeg'&&imgext!='gif'){
            img.value
='';
            alert('格式不对!');
            
return false;
        }
        document.getElementById(
"previewImg").innerHTML="<img src='"+img.value+"' width=120 />";
    }
}
</script>
<input type="file" name="f" id="f" onchange="previewPic()" />
<div id="previewImg"></div>
</body>
</html>

相关文章推荐

一个投机取巧的上传图片前预览

最近一直在找BS端的图片上传前进行预览,试了WebUploader,浏览器兼容性挺好,但是,,,在IE浏览器的兼容模式下,就不能用了,所以排除了,而且,不清楚怎么获取图片的原本宽高,以后再看看吧。。。...

JavaScript上传图片前预览

JavaScript上传图片前预览border

jQuery上传图片前预览

研究了很久,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,然并卵。直接上代码。html部分: input:file事件是上传类型 较常用的属性值如

input type=file 上传图片前预览 亲测支持 ie8 chrome ff android及ios浏览器(将网上的版本整合一下)

Firefox3,IE6,IE7,IE8上传图片预览 #preview_wrapper{ display:inline-block; width:100px; height:100px; ba...

上传图片前预览

function ClearFile(path,clear,type){       //用于清楚          $("#reset"+type).sh...

js上传图片前预览

js上传图片前预览

上传图片前,图片预览

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)