<title>文件上传前台控制检测程序 v0.6</title>
<style>
body,td{font-size:12px;}
</style>
<script language=javascript>
function FnImgChange()
{
var objImgPath = document.getElementById("file_pic_path1");
var objImg = document.getElementById("divShow");
var img = objImgPath.value;
objImg.style.visibility = "hidden";
objImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img;
objImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
//过一小会获取div的宽高.
setTimeout("setImg()",100);
}
function setImg()
{
var o = document.getElementById("divShow");
var width_img;
var height_img;
o.style.visibility = "visible";
width_img=o.offsetWidth;
height_img=o.offsetHeight;
var width=420; //预定义宽，图片的宽度了
var height=200; //预定义高，如果宽小于长度，那么他会自适应按照宽度来计算比例，所以对于一般情况长>宽的照片时候，这个参数没啥意义
var ratW; //宽的缩小比例
var ratH; //高的缩小比例
var rat; //实际使用的缩小比例
if(width_img <width && height_img <height)
{
//如果比预定义的宽高小，原图显示。
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
return;
}
else
{
//如果大的化，要把 sizingMethod改成scale 如果属性是image,不管怎么改div的宽高，都不起作用
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
}
ratH = height/height_img;
ratW = width/width_img;
if(ratH <ratW) //选择最小的作为实际的缩小比例
rat=ratH;
else
rat=ratW;
width_img = width_img * rat;
height_img = height_img * rat;
o.style.width = width_img;
o.style.height = height_img;
}
</script>
<form enctype="multipart/form-data" method="POST" onsubmit="return HasChecked;">
<input type="file" id="file_pic_path1" onchange="FnImgChange()" style="width:180px;">
图片:
[align=right]
<font color="#FF0000">*</font>选择图片:
</td>
<td width="78%">
<input onchange="getPreImg();" id="uploadField" name="fileName" encType="multipart/form-data" method="post" type="file" class="text1" size="60" maxlength="60">
</td>
</tr>
代码
－－－－－－－－－－－－
<html>
<head>
<meta name="generator" content="microsoft visual studio 6.0">
<title></title>
</head>
<script language=javascript>
<!--
function changephoto()
{
document.all.img1.src=document.all.file1.value;
}
function show ()
{
if (document.all.file1.value=="")
alert ("还没有选择图片");
else
alert ("选择的图片大小：" + document.all.img1.filesize +"＼n宽度：" + document.all.img1.width + "＼n高度：" + document.all.img1.height);
}
//-->
</script>
<body>
<form action="" method=post id=form1 name=form1>
<input id=file1 type=file name=file1 onchange="changephoto()">
</form>
test
<br>
<img id="img1" >
</body>
</html>
这样的代码能获取我们需要上传的图片的大小，不过对于上传其他类型的文件，似乎有点无能为了了，而且更有一个问题，不论通过何种方法想把img1隐藏起来，能获取图片的大小，但却获取不了图片的尺寸。
分享到：
相关推荐
在.NET开发环境中，图片上传预览功能是常见的需求，它允许用户在上传图片到服务器之前进行查看和确认，提升用户体验。下面将详细讲解如何实现这一功能。 首先，我们需要理解图片预览的基本原理。图片预览通常涉及到...
在IT行业中，图片上传预览是一项常见的功能，特别是在网页应用和移动应用中。这个插件的标题"图片上传预览效果，很小的一个插件"表明它是一个轻量级的解决方案，专为实现快速、便捷的图片预览而设计。描述中提到...
【纯 js 实现得 图片上传预览插件】 在前端开发中，图片上传和预览功能是非常常见且重要的一个部分。本项目采用原生JavaScript实现了这样一个图片上传预览插件，无需依赖jQuery或其他第三方库，使代码更加轻量级且...
在网页开发中，图片上传预览功能是一个常见且重要的需求，它允许用户在实际上传之前预览选定的图片，提供更好的用户体验。`Jquery` 和 `JavaScript` 是实现这一功能的常用工具，它们能轻松地处理DOM操作和事件监听。...
在图片上传预览中，jQuery可以用来监听文件输入元素的变化，获取用户选择的图片，并实时显示预览效果。 要实现这一功能，你需要在HTML中创建一个`<input type="file">`元素，让用户选择图片。添加`change`事件监听...
**jQuery带删除功能多图片上传预览插件详解** 在Web开发中，用户常常需要上传图片，特别是社交媒体、电子商务和内容管理系统等应用。为了提供更好的用户体验，开发人员通常会使用前端预览技术，让用户在正式上传...
在Java Web开发中，图片上传预览功能是一个常见的需求，尤其在用户交互性强的网站或应用中。这个功能允许用户在上传图片之前查看其效果，确保上传的图片符合预期。以下将详细介绍如何在Java环境中，结合ASP和JSP技术...
jquery图片上传预览插件，通过 IE6、7、8、9 , chrome, firefox测试 测试时采用的是jquery1.7.1，未经过其它jquery版本测试。 使用时，您可以根据需要，随意修改！ --------------------------------- =====更新...
jQuery PHP头像图片上传预览插件
在IT领域，多图片上传预览插件是网站或应用程序中常见的一种功能，它允许用户在上传图片到服务器之前进行在线预览。这样的插件极大地提升了用户体验，因为用户可以在正式提交之前检查图片的质量、方向和效果。下面...
这个"Flex4.6+java+servlet上传图片例子+图片上传预览"的项目，结合了前端的Flex技术和后端的Java Servlet，为我们提供了一个完整的解决方案。下面将详细解释这个项目的各个组成部分及其工作原理。 首先，让我们来...
在IT领域，图片上传预览控件是一种常见的用户界面组件，尤其在网页设计和开发中。这个组件允许用户选择并预览多张图片，提升用户体验，确保他们在上传之前能够查看和确认图片的质量和效果。本篇文章将深入探讨“多...
在IT行业中，图片上传预览剪切功能是一个常见的需求，特别是在网站用户界面设计中，比如个人资料设置、社交网络或电子商务平台。这个功能允许用户在上传图片前进行预览和编辑，确保上传的图片符合所需的尺寸和比例。...
在网页开发中，图片上传预览是一个常见的功能，它允许用户在正式上传图片之前查看预览效果，确保图片质量和格式符合需求。这个功能通常通过JavaScript库实现，而jQuery作为一个广泛使用的JavaScript库，提供了便利的...
在JavaScript开发中，图片上传预览效果是一种常见的需求，它允许用户在正式上传图片之前查看其效果，确保图片质量和方向正确。本知识点将围绕“js图片上传预览效果”这一主题，结合提供的文件名列表，深入讲解实现这...
在现代Web应用中，图片上传预览功能是一个常见的需求，特别是在社交媒体、电子商务和个人博客等网站上。本技术讨论主要围绕“图片上传预览（兼容所有主流浏览器）”这一主题展开，我们将深入探讨如何利用JavaScript...
在IT行业中，图片上传预览功能是网页应用中常见的需求，尤其在社交媒体、电商网站以及内容创作平台等。Flash作为一种曾经广泛使用的交互式内容开发工具，曾被大量用于实现图片上传预览。本文将深入探讨如何利用Flash...
"Ajax多图片上传预览"技术就是为了解决这个问题，它允许用户在真正提交图片到服务器之前进行预览，无需等待整个文件上传完成。这种功能极大地提升了用户体验，因为它减少了用户的等待时间，并且在上传过程中提供了...