利用H5新特性判断文件大小

HTML代码部分： 

思路：下面代码中我利用css的z-index属性将input="file”标签隐藏在了id=btnSelect元素下面，通过触发a标签的点击后，弹出文件选择框。下面的masklayer用于点击确认按钮后的弹出层，避免用户重复点击确认按钮。 

复制代码
代码如下:

<div id="wp" class="warpper"> 
<a id="btnSelect">单击选择要上传的照片</a> 
<input id="uploadFile" type="file" name="myPhoto" /> 
<button id="btnConfirm" class="btn" >确认上传</button> 
</div> 
<div id="maskLayer" class="mask-layer" style="display:none;"> 
<p>图片正在上传中...</p> 
</div> 

JS图片文件验证部分： 

验证部分为：大小，是否已经选择，文件的类型 三个部分。第一个createObject方法为创建本地图片文件的预览路径，依次验证是否为空，文件类型以及文件大小，不满足条件则一律返回 

false,满足以上3个条件后，在dom中生成图片预览，添加img元素，然后利用createObjectURL()方法获取预览路径。 

代码： 

复制代码
代码如下:

//获取数据的URL地址 
function createObjectURL(blob) { 
if (window.URL) { 
return window.URL.createObjectURL(blob); 
} else if (window.webkitURL) { 
return window.webkitURL.createObjectURL(blob); 
} else { 
return null; 
} 
} 
//文件检测 
function checkFile() { 
//获取文件 
var file = $$("uploadFile").files[0]; 
//文件为空判断 
if (file === null || file === undefined) { 
alert("请选择您要上传的文件！"); 
$$("btnSelect").innerHTML = "单击选择要上传的照片"; 
return false; 
} 
//检测文件类型 
if(file.type.indexOf('image') === -1) { 
alert("请选择图片文件！"); 
return false; 
} 
//计算文件大小 
var size = Math.floor(file.size/1024); 
if (size > 5000) { 
alert("上传文件不得超过5M!"); 
return false; 
}; 
//添加预览图片 
$$("btnSelect").innerHTML = "<img class="photo" src=""+createObjectURL(file)+""/>"; 
}; 

 转自：http://www.jb51.net/html5/171339.html