JS 判断上传的文件大小和后缀
评论 0 热度 547
记得老久以前我的浏览器不允许用JS获取INPUT选中的文件的路径。
代码是从我以前写的一个文件里扒出来的,这里阉割了部分代码。不想听我吹水的话看check()
函数即可。原INPUT样式太霸道,干脆隐藏了,用label for来代替,renewfileinfo()
用来更新选中的文件名称,给button绑定个upload()
函数用JQ同步上传文件,是同步,不知道当时我怎么想的...翻了下全部代码发现是想要显示上传结束后返回的内容。
html
<form id="form" onsubmit="return false" enctype="multipart/form-data">
<label for="bt" class="selectfile">
<span id="selectfile">点击选择</span>文件
<input type="file" id="bt" style="display: none;" name="bt" onchange="renewfileinfo();">
</label>
<button id="submit" onclick="upload();">上传</button>
</form>
javascript
function renewfileinfo() {
var el = document.getElementById("bt").value;
var pos = el.lastIndexOf("\\");
var fl = el.substring(pos+1);
if (!fl) {
fl = "点击选择";
}
document.getElementById("selectfile").innerHTML=fl;
}
function check(){
var obj = bt; //input的id
Ext=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
if(Ext!='.zip'){
alert("请上传后缀名为.zip的文件!");
return false;
}
var fileSize = 0;
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
if (isIE && !obj.files) {
var filePath = obj.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile(filePath);
fileSize = file.Size;
}else {
fileSize = obj.files[0].size;
}
fileSize=Math.round(fileSize/1024*100)/100; //单位为KB
if(fileSize>=2048){
alert("文件最大尺寸为2MB,请重新上传!");
return false;
}
return true;
}
function upload(){
if (!confirm("确定上传?")) {
return false;
}
if (!check()) { //检测是否合格
return false;
}
var form = new FormData(document.getElementById("form"));
var up = $.ajax({
url:"*******",
type:"post",
data:form,
cache: false,
async: false,
processData: false,
contentType: false,
success:function(data){
alert("上传成功");
$("#bt").val("");
renewfileinfo();
},
error:function(e){
alert("上传失败");
}
});
}