<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户中心</title>
<base href=""/>
<meta http-equiv="keywords" content="${keywords}">
<meta http-equiv="description" content="${description}">
<script type="text/javascript">
function perImg(o){
var filepath = "";//文件路径
var agent=window.navigator.userAgent;
var isIE7 = agent.indexOf('MSIE 7.0') != -1;
var isIE8 = agent.indexOf('MSIE 8.0') != -1;
if( !o.value.match(/.jpg|.gif|.png|.bmp/i)){
alert('图片格式无效!');
return;
}
if(agent.indexOf("Firefox")!=-1){
//火狐浏览器判断
document.getElementById("preview").src = window.URL.createObjectURL(o.files[0]);//显示预览图
var fileSize=o.files[0].size; //获取文件大小
alert(fileSize);
if(fileSize>1024*1024){
alert("文件不能大于1M");
return false ;
}
document.getElementById("preview").onload=function(){
getPic();
}
}else{//IE浏览器
document.getElementById("preview").src =o.value; //显示预览图片
var img=new Image();//动态创建img
img.src=o.value;
img.style.display="none";
if(img.readyState=="complete"){//已经load完毕,直接打印文件大小
var height = img.height;
var width = img.width;
var size= Math.round(img.fileSize / 1024 * 100) / 100;// 取得图片文件的大小
alert(size+" KB--宽--"+width+"--高--->"+height);//ie获取文件大小
}else{
img.onreadystatechange=function(){
if(img.readyState=='complete'){//当图片load完毕
var height = img.height;
var width = img.width;
var size= Math.round(img.fileSize / 1024 * 100) / 100;// 取得图片文件的大小
alert(size+" KB--宽--"+width+"--高--->"+height);//ie获取文件大小
}
}
}
}
}
function getPic(){
var width = document.getElementById("preview").width;
var height= document.getElementById("preview").height;
alert(width);
alert(height);
if(width > 800){
alert("图片宽度不符合");
return false ;
}
if(height > 800){
alert("图片高度不符合");
return false ;
}
}
</script>
</head>
<body>
<div>
<img id="preview" width="120" height="100" />
</div>
<br />
<input type="file" id="file" name="file" onChange="perImg(this)" />
</body>
</html>
分享到:
相关推荐
file标签,多选图片,然后图片显示在页面,使用html5 file api
这是一款非常特色的HTML5鼠标悬停超链接显示图片特效,当鼠标悬停到超链接文字上时,会在超链接下面显示一张设定好的图片或者多张图片切换预览效果。
html上传图片直接显示,JS实现图片上传直接显示,具体上传格式可以自己进行更改~
形考任务二 (1)通过使用 HTML,可以在文档中显示图像,插入一副图像(jpg)、插入一副动图图像(gif格式)。 (2)从不同位置,包括文件夹和网络,插入
亲测,完美解决excel转换成html后图片无法显示的问题。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。...
本地图片使用二进制流存储到MySQL中,然后响应前端的传参,查询后可以显示在HEML网页中,相当于图片的简单上传和显示
但是,怎样让TextView也显示Html中节点的图像呢? 我们可以看到fromHtml还有另一个重构: fromHtml(String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler) 实现一下ImageGetter就可以让图片...
select下拉菜单显示文字属于很正常的事情,但是显示图片,这样的代码就少见了吧,今天懒人之家给大家推荐的就是显示图片的select特效
在网页上显示二维码图片,可以运行在嵌入式系统中使用
html 上显示tif格式的图片,需要的可以下载。
如何解决java html转pdf图片不显示问题的源码范例(由浅入深代码范例和详细说明)
在Html上选择本地文件夹,自动读取文件夹及子文件夹下的所有图片并显示在页面。 技术分析: 存在问题 Html中file标签获取到的路径时相对的。 Html中Img指定源时需要的是绝对路径。 解决方法: 调用Web API接口...
HTML一张大图片,屏幕显示不下,显示滚动条,拖动滚动条来观看大图片(移动视口).zip
Android TextView可以支持简单的... 1、图片不能居中显示 2、图片的大小被缩小 3、图片是在ImageGetter中获取,ImageGetter不能和ImageSpan同时使用; 笔者通过参考大量资料和源码,解决了上述3个问题。
在HTML中展示tiff格式图片,web网页展示tif格式图片。
TextView显示html的文本、图片
HTML静态网页代码,实现功能:图片翻转显示文字。简单易学,为了下载而上传……仅供参考。
最近两天在弄一个界面显示的事情,虽然要求不高,不过还是想做得好看一些,就想在htmldialog上来显示web脚本,这样也方便格式化显示。 但是这htmldialog只能显示url,而无法显示一段html脚本,于是通过研究和思路...
如何解决java html转pdf图片不显示问题的源码范例合集new(由浅入深代码范例和详细说明).docx
用TextView加载HTML文件并显示图片