上传图片 可限制大小和文件类型

方法1

js

//验证上传文件大小和类型/*** * @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()}

html

<input type="file" id="upload-file"><script>$('#upload-file').change(function() {fileValid(this, 2048, 'image', function() {alert('success')})})</script>

方法2

html

<input type="file" name="files" id="file" onchange="verificationPicFile(this)">

js

function verificationPicFile(file) {var fileTypes = [".jpg", ".png"]; var filePath = file.value; //当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false if(filePath){var isNext = false; var fileEnd = filePath.substring(filePath.indexOf(".")); for (var i = 0; i < fileTypes.length; i++) {if (fileTypes[i] == fileEnd) {isNext = true;break; } } if (!isNext){alert('不接受此文件类型'); file.value = ""; return false; } }else {return false; }}//图片大小验证function verificationPicFile(file) {var fileSize = 0;var fileMaxSize = 1024;//1Mvar filePath = file.value;if(filePath){fileSize =file.files[0].size;var size = fileSize / 1024;if (size > fileMaxSize) {alert("文件大小不能大于1M！"); file.value = ""; return false;}else if (size <= 0) {alert("文件大小不能为0M！");file.value = ""; return false; } }else{return false; } }//图片尺寸验证 function verificationPicFile(file) {var filePath = file.value;if(filePath){//读取图片数据 var filePic = file.files[0];var reader = new FileReader(); reader.onload = function (e) {var data = e.target.result;//加载图片获取图片真实宽度和高度 var image = new Image();image.onload=function(){var width = image.width; var height = image.height;if (width == 720 | height == 1280){alert("文件尺寸符合！"); }else {alert("文件尺寸应为：720*1280！"); file.value = ""; return false; } }; image.src= data;};reader.readAsDataURL(filePic);}else{return false; } }