这样设置的:
1、先用form标签创建一个上传的表单。
<form id="form1" name="form1" method="post" action="" enctype="multipart/form-data"><p><input type="hidden" name="MAX_FILE_SIZE" value="100000" /></p>
<p><input name="userfile" id="userfile" type="file" onchange="check()"/></p>
</form>
2、用Javascript设置格式和大小。
<script language="JavaScript" type="text/javascript"> function check() {var aa=document.getElementById("userfile").value.toLowerCase().split('.')//以“.”分隔上传文件字符串 // var aa=document.form1.userfile.value.toLowerCase().split('.')//以“.”分隔上传文件字符串 if(document.form1.userfile.value=="") { alert('图片不能为空!') return false } else { if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'||aa[aa.length-1]=='bmp'||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg')//判断图片格式 {var imagSize = document.getElementById("userfile").files[0].sizealert("图片大小:"+imagSize+"B")if(imagSize<1024*1024*1) alert("图片大小在1M以内,为:"+imagSize/(1024*1024)+"M") return true } else { alert('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片')// return false } } } </script>
图片超过1M则不能上传 如图:
图片按比例缩放function DrawImage(Img,WIDTH,HEIGHT){
var image=new Image()
image.src=Img.src
width=WIDTH//预先设置的所期望的宽的值
height=HEIGHT//预先设置的所期望的高的值
if(image.width>width||image.height>height){//现有图片只有宽或高超了预设值就进行js控制
w=image.width/width
h=image.height/height
if(w>h){//比值比较大==>宽比高大
//定下宽度为width的宽度
Img.width=width
//以下为计算高度
Img.height=image.height/w
}else{//高比宽大
//定下宽度为height高度
img.height=height
//以下为计算高度
Img.width=image.width/h
}
}
}
<img src="xxxx" onload=javascript:DrawImage(this,290,215)>
这种情况用CSS来控制最合适。例如你想让初始图片显示为100px*100px,则:<img src="images/pic.png" width="100" height="100" />
或者:
<img src="images/pic.png" style="width:100pxheight:100px" />
当页面中图片非常多,且要求每张图片的大小依据其父容器来固定怎么办?可以使用max-weight:
img {max-weight:100%}
这样图片会自动缩放到和其父容器等宽。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)