标签：数据 fun nbsp back sub sda ada type color
在项目中经常用到input标签来上传文件，而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //图片类型验证 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; } var fileSize = 0; var fileMaxSize = 1024;//1M var 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 fileSize = 0; // var fileMaxSize = 1024;//1M // var 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; // } //} </script> </head> <body> <input type="file" name="files" id="file" onchange="verificationPicFile(this)"> </body> </html>
<input type = file/>上传图片限制大小、类型判断、像素判断
标签：数据 fun nbsp back sub sda ada type color
原文地址：https://www.cnblogs.com/llhWeb/p/9771072.html
