Javascript在上传图片中的应用

最新推荐文章于 2023-04-03 00:22:51 发布

xinma

最新推荐文章于 2023-04-03 00:22:51 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript function file action input 脚本

本文链接：https://blog.youkuaiyun.com/xinma/article/details/2610690

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用HTML和JavaScript实现图片上传后的实时预览功能，并调整预览图片的大小以适应显示区域。此外，还展示了如何通过JavaScript获取上传文件的详细信息，包括文件大小、路径和名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1）在上传图片中选择图片后实现预览

<html>

<head>

</head>

<body>

<form action="" method="post" enctype="multipart/form-data" name="form1">

<input name="attach" type="file" onchange="javascript:ShowImg(this.value);" onKeyDown="javascript:return(false);" size="20">

<script language="JavaScript">

function ShowImg(src)

{

document.getElementById("imgDiv").innerHTML="图片预览：<br><img id='imgObj' onerror='javascript:GetError()' onload='javascript:GetSize()' src='file:///" + src + "'>";

}

function GetSize()

{

var width,height;

var imgObj=document.getElementById("imgObj");

width=imgObj.width;

height=imgObj.height;

document.getElementById("err_msg").innerHTML="图片大小(宽×高):<font color=red>" + width + "×" + height + "</font>";

if(width>164){

imgObj.width=164;

imgObj.height=imgObj.height/(imgObj.width/164);

}

}

function GetError()

{

document.getElementById("err_msg").innerHTML="图片大小(宽×高):<font color=red>NaN</font>";

document.getElementById("imgDiv").innerHTML="";

document.getElementById("err_msg").innerHTML="图片文件不存在或格式错误！"

}

</script>

<div id="imgDiv" align="center"></div>

<div id="err_msg" align="center"></div>

</form>

</body>

</html>

2)利用Javascript获取上传文件、图片在JavaScript脚本中获取上存文件、图片等的大小，名称等可以用ActiveXObject对象来进行如

var fileobject = new ActiveXObject ("Scripting.FileSystemObject");//获取上传文件的对象

var file = fileobject.GetFile (上传文件的路径);//获取上传的文件

var filesize = file.Size;//文件大小

var filepath = file.path;//文件的路径

var filename = file.name;//文件的名称