HTML5如何判断文件大小

一、HTML5前端判断文件大小

<input type="file" id="hiddenFileWidget"  name="img" class="absolute visibility_hidden" 
data-max_size="8388608" onchange="angular.element(this).scope().startUpload(event)">

//上传文件 action
$scope.startUpload = function(myevent){
	//检查文件大小
	var target = myevent.target;
	var currentObj = $(target);
	var fileSize = parseInt(currentObj.attr("data-max_size"));
	var inFactFileSize = target.files[0].size;
	if(inFactFileSize > fileSize){
		tipService.alert({
			title:"提示!",
			template:"上传文件不能超过8M",
			callback:function(){

			}
		});
		return false;
	}

	$ionicLoading.show({
		template: 'Loading...'
	});

	entrustSellService.uploadFileAction($scope);
};

在js事件中，event对象通过 event.files[n]访问具体的file对象，可以通过该对象获取file文件相关的属性（大小、文件格式、修改日期等属性）。

二、利用后台判断上传文件大小（兼容早期浏览器）

在submit之后，浏览器会发送http请求给后台，http头部包含向服务器提交数据的大小，如图所示

后台在第一次获取到数据流的时候，先判断http头部，如果不满足上传文件的大小，则终止数据流，减少流量。