html5前端实现文件分割上传

最新推荐文章于 2025-09-23 20:45:56 发布

原创最新推荐文章于 2025-09-23 20:45:56 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

13k 专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一个简单的HTML页面实现文件上传的功能，通过表单提交文件，并利用JavaScript进行文件大小的检测与显示。代码中展示了如何使用jQuery来选择文件并读取文件的基本信息，如文件名和大小。

<body>
	<form action="${ctx }/file/uppicture" enctype="multipart/form-data"  method="post" >
		<input type="file" name="file"/> <br><br><br>
		<input type="submit" value="form提交"/> <!-- form 表单提交--><br><br><br>
		<input type="button" value="ajax提交"/> <!-- ajax 提交文件 -->
	</form>
	
	<script type="text/javascript">
		$(function(){
			$("input[type=button]").click(function(){
				 var files = $("input[type=file]")[0].files;
				 console.log(files);
				 console.log(files[0].size);
				 console.log(files[0].name);
				 
				 var index = 1024*1024*10;
				 
				 var lump = files[0].size/index;
				 console.log(lump);
				 var num = parseInt(lump);
				 console.log(num);
				 
			});
		});
	</script>
</body>