html5前端实现文件分割上传

关注

原创最新推荐文章于 2026-04-15 19:33:27 发布 2.5k 阅读 AI 写同款· GEO 优化 ›

前端大文件上传如何实现（文件切片）但是大文件的上传是一个特殊的情况：大文件上传最主要的问题就在于：在一个请求中，要上传大量的数据，导致整个过程会比较漫长，且失败后需要重头开始上传。说明：考虑到如果上传一个超大文件，读取文件内容计算 hash 是非常耗费时间的，并且会引起 UI 的阻塞，导致页面假死状态，所以我们使用 web-worker 在 worker 线程计算 hash，这样用户仍可以在主界面正常的交互。常见的软件应用中，前端/后端都会对一个请求的时间进行限制，那么大文件的上传就会很容易超时，导致上传失败。对象包含一个重要的方法。阅读详情

<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>

收录于