js判断上传文件大小

最新推荐文章于 2021-06-07 13:26:42 发布

最新推荐文章于 2021-06-07 13:26:42 发布 · 104 阅读

文章标签：

#JavaScript #HTML #ViewUI

javascript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一段使用JavaScript实现的文件上传功能，包括文件选择、预览、大小限制和错误提示。通过事件监听和条件判断，确保上传的图片不超过300KB，为网站提供了更高效、更安全的文件上传体验。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

	<SCRIPT LANGUAGE="JavaScript">
		function doupload(){
			var imgsrc = document.getElementById("thefile").value;
			var theimg = document.getElementById("theimg");
			var thebnt = document.getElementById("thebnt");
 
			theimg.src = imgsrc;


			theimg.onload = function(){
				if(theimg.fileSize > 300*1024){
					thebnt.style.display = "none";
					alert("图片不能大于300K!");
				}else {
					thebnt.style.display = "";
				}
			}


			theimg.onerror = function(){
				thebnt.style.display = "none";
				alert("上传图片有误,请更换图片!");
			}
		}
 
	</SCRIPT>
   
       

 </HEAD>

 <BODY>
  
   <input type="file" id="thefile" onchange="doupload()"/>
   <input type="button" value="上传" id="thebnt" onclick="doupload()" style="display:none;"  />
   <img src="" id="theimg" style="display:none;" >
 </BODY>
</HTML>