<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>
分享到：
相关推荐
在“html5实现页面的显示本地图片”这个主题中，我们主要关注的是HTML5的`<input type="file">`标签以及File API，它们允许用户选择本地图片并在网页上预览或处理。 **1. `<input type="file">`标签** `...
HTML，全称HyperText Markup Language，是用于创建网页的标准标记...同时，根据图像来源的不同，选择适当的路径引用，确保图像能够被浏览器正确加载。在国开在线学习环境中，熟练掌握这些技巧对提高学习效果大有裨益。
在实际开发中，我们可能会遇到一种需求，即通过下拉框选择来控制图片的显示。本文将详细介绍如何使用JavaScript来实现这一功能。 首先，我们需要知道HTML中`<img>`标签的`src`属性用于指定图片的URL路径。而`...
不过，仍然有几种方法可以在HTML页面中显示TIFF格式的图片，这些方法主要依赖于转换、插件或JavaScript库。 1. **转换为常见格式**： - 最简单的方法是将TIFF文件转换为更普遍支持的格式，如JPEG或PNG。可以使用...
在网页上显示TIFF（TIF）格式的图片是一个相对复杂的过程，因为TIFF是一种较为专业且功能强大的图像格式，通常用于高质量的印刷和扫描，而不是网页浏览。它支持多种压缩算法和色彩模式，这使得它在HTML环境中直接...
`HtmlTextView`是Android开发中的一个开源项目，主要用于在3.0及以上版本的TextView中解析并展示HTML代码，尤其在处理网络上的图像或图片时非常有用。然而，根据描述，这个项目在Android 7.0及更高版本上的表现可能...
总结，针对Android TextView实现HTML图片显示，可以选择WebView方式，它适用于复杂的HTML渲染，而如果只是简单展示图片，使用`Html.fromHtml()`配合自定义`ImageGetter`会更轻量级。两种方法都能实现图片点击的交互...
但是，怎样让TextView也显示Html中节点的图像呢？ 我们可以看到fromHtml还有另一个重构： fromHtml(String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler) 实现一下ImageGetter就可以让图片...
在Html上选择本地文件夹，自动读取文件夹及子文件夹下的所有图片并显示在页面。 技术分析： 存在问题 Html中file标签获取到的路径时相对的。 Html中Img指定源时需要的是绝对路径。 解决方法： 调用Web API接口...
在C#编程环境中，我们经常需要处理图像显示任务，特别是在开发桌面应用或Windows Forms应用程序时。图像控件（PictureBox）是C#中的一个关键组件，它允许我们在界面上展示图片。下面将详细介绍如何使用C#的图像控件...
然而，标准的`<select>`元素通常只支持文本内容，不直接支持显示图片。但随着网页交互性的增强，设计师们有时需要在下拉列表中加入图片以提升用户体验。"select下拉列表显示图片内容"就是这样一个特例，它通过一些...
综上所述，"立即显示选择的上传图片"技术结合了HTML5的新特性、JavaScript的动态操作以及CSS3的美化效果，提供了高效且友好的图片上传预览功能。在实际应用中，开发者需要关注兼容性、安全性和性能优化，以实现更佳...
标题 "自动读取文件夹中图片并显示在网页中" 涉及到的主要知识点是动态生成网页内容和文件系统操作。在这个场景中，我们通常会使用编程语言（如JavaScript、Python、PHP等）来实现这个功能。下面将详细介绍相关的...
在本文中，我们将深入探讨如何使用Java实现在本地读取图片并将其存储到数据库中，之后再通过HTML页面显示这些图片。这个过程涉及到的主要技术包括Java编程、数据库操作（特别是MySQL）以及前后端交互。 首先，我们...
通过一些特殊的技术，我们还可以让`TextView`显示HTML格式的文本，甚至嵌入图片。这个主题主要涉及如何利用`TextView`的特性以及第三方库来实现这一功能。 1. **HTML支持** `TextView`默认支持一部分HTML标签，如`...
在HTML中，处理大图片无法完全在屏幕上显示的问题通常涉及到几个关键知识点，包括CSS样式、HTML布局以及可能的JavaScript库的使用。在这个场景下，由于屏幕尺寸限制，大图片会触发浏览器的默认滚动条，允许用户通过...
html上传图片直接显示，JS实现图片上传直接显示，具体上传格式可以自己进行更改～
你可以通过设置CSS样式来控制这两个图像的初始状态，比如小图显示在页面上，而大图默认隐藏。 ```html ;"> ``` 接下来，我们需要引入jQuery库。如果你的项目中还没有包含jQuery，可以通过CDN链接添加，或者将...
在开发HTML5应用程序，特别是在Windows Phone 8 (WP8)平台上时，正确显示图片是一个常见的需求。本篇文章将深入探讨如何在Visual Studio 2013环境下，利用jQuery Mobile和HTML5技术解决在WP8模拟器中显示图片的问题...
1. 使用`WebView`加载HTML图片： 可以利用`WebView`的完整HTML渲染能力，加载包含图片的HTML内容。`WebView`可以识别`<img>`标签，并显示对应的网络或本地资源图片。只需设置`WebView`的`setWebViewClient`和`...