前台获取并限制上传文件大小、上传文件格式

<input type="file" id="file"/>
<input type="button" id="btn" value="js查看文件大小"/>
<input type="button" id="btn1" value="jq查看文件大小"/>
<script>
//js获取上传文件大小（单位：字节）
document.getElementById("btn").onclick=function(){
alert(document.getElementById("file").files[0].size);
};
//jq获取上传文件大小（单位：字节）    jq转js，加下标即可
$("#btn1").click(function(){
alert($("#file")[0].files[0].size);
});

</script>

<div id="fileparent"><input type="file" id="file"/></div>
<input type="button" id="btn" value="js查看文件大小"/>
<input type="button" id="btn1" value="jq查看文件大小"/>
<script>
//js获取上传文件大小（单位：字节）
document.getElementById("btn").onclick=function(){
alert(document.getElementById("file").files[0].size);
};
//限制上传文件大小（单位：字节）
//限制上传文件格式，可直接判断后缀或者用indexOf方法判断后缀格式是否符合要求
$("#btn1").click(function(){
alert($("#file")[0].files[0].size);
if($("#file")[0].files[0].size>1024000){
alert("文件过大！");
//清理file里的文件内容
$("#fileparent").html('<input type="file" id="file"/>');
return;
}
alert($("#file").val());
//获取上传文件路径
var string=$("#file")[0].value;
//对路径字符串进行剪切截取
var arrays=string.split("\\");
//获取文件名，包含后缀
var name=arrays[arrays.length-1];
alert(name);
//为了辨别格式，统一变小写
name=name.toLowerCase();
if(!(name.endsWith("png")||name.endsWith("jpg")||name.endsWith("jpeg"))){
alert("请上传jpg、jpeg或png格式的图片！");
//清理file里的文件内容
$("#fileparent").html('<input type="file" id="file"/>');
}
});