上传图片时在客户端限制图片大小并弹框

文件上传大小限制与图片预览实现

最新推荐文章于 2025-11-30 09:20:25 发布

最新推荐文章于 2025-11-30 09:20:25 发布 · 182 阅读

文章标签：

#javascript #ViewUI

本文详细介绍了如何在网页中实现文件上传大小限制，并通过JavaScript读取并预览上传的图片，确保用户体验与安全性。

<input type="text" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"/> K
<input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/>
<img src="about:blank" id="fileChecker" alt="test" height="18"/>

//前面为网页
<script type="text/javascript">
var oFileChecker = document.getElementById("fileChecker");

function changeSrc(filePicker)
{
oFileChecker.src = filePicker.value;//读图片
}

//这个很重要，判断是否完全读完，否则判断图片大小不准确
oFileChecker.onreadystatechange = function ()
{
if (oFileChecker.readyState == "complete")
{
checkSize();
}
}

function checkSize()
{
var limit = document.getElementById("fileSizeLimit").value * 1024;

if (oFileChecker.fileSize > limit)
{
alert("too large");
}
else
{
alert("ok");
}
}
</script>[color=red][/color]