<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input_file验证</title>
</head>
<body>
<input type="file" id="upload-file">
<script>
var upload = document.getElementById('upload-file');
upload.addEventListener('change',changeHandler);
function changeHandler(){
fileValid(this, 2048, 'image', function () {
/*
* 用input——file上传文件，掉用onchange方法时，多次上传同一个文件时功能失效，不会发送ajax请求
* input[type = file] 使用的是onchange去做，onchange监听的为input的value值，
* 只有再内容发生改变的时候去触发，而value在上传文件的时候保存的是文件的内容，
* 你只需要在上传成功的回调里面，将当前input的value值置空即可
* 设为空之后在次点击就可实现同一文件多次上传操作
* */
upload.value = '';
});
}
/**
* 验证上传文件大小和类型
* @param {this} value_ [获取input对象，一般为this]
* @param {[number]} size_ [文件限制的大小，单位为kb]
* @param {[string]} type_ [文件类型，当前支持image和office]
* @param {[function]} callback [验证通过的回调]
*/
function fileValid (value_, size_, type_, callback) {
var file = value_.files[0];
var fileSize = (file.size / 1024).toFixed(0)
var fileType = value_.value.substring(value_.value.lastIndexOf("."));
if (fileSize > size_) {
alert('文件过大');
return false
}
switch (type_) {
case 'image':
if (!fileType.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {
alert('请上传图片')
return false;
}
break;
case 'office':
if (!fileType.match(/.doc|.docx|.xls|.xlsx|.ppt|.pptx/i)) {
alert('请上传word、excel或ppt文件')
return false;
}
break;
default:
console.error('type_参数设置不正确！')
return false;
break;
}
callback()
}
</script>
</body>
</html>