INPUT FILE实现前端验证文件类型和大小限制和图片长宽限制
现代浏览器越来越强大,以前限制文件上传类型和大小要使用flash,现在html5直接支持,input file可以在chrome浏览器实现文件类型过滤及大小限制了,我们来看看示例
<input type="file" accept="image/*" />上面那段代码就是加了accept属性
accept表示可以上传文件类型,image表示图片,*表示所有支持的格式。
下面我们来看看input accept支持哪些类型
*.3gpp | audio/3gpp, video/3gpp | 3GPP Audio/Video |
*.ac3 | audio/ac3 | AC3 Audio |
*.asf | allpication/vnd.ms-asf | Advanced Streaming Format |
*.au | audio/basic | AU Audio |
*.css | text/css | Cascading Style Sheets |
*.csv | text/csv | Comma Separated Values |
*.doc | application/msword | MS Word Document |
*.dot | application/msword | MS Word Template |
*.dtd | application/xml-dtd | Document Type Definition |
*.dwg | image/vnd.dwg | AutoCAD Drawing Database |
*.dxf | image/vnd.dxf | AutoCAD Drawing Interchange Format |
*.gif | image/gif | Graphic Interchange Format |
*.htm | text/html | HyperText Markup Language |
*.html | text/html | HyperText Markup Language |
*.jp2 | image/jp2 | JPEG-2000 |
*.jpe | image/jpeg | JPEG |
*.jpeg | image/jpeg | JPEG |
*.jpg | image/jpeg | JPEG |
*.js | text/javascript, application/javascript | JavaScript |
*.json | application/json | JavaScript Object Notation |
*.mp2 | audio/mpeg, video/mpeg | MPEG Audio/Video Stream, Layer II |
*.mp3 | audio/mpeg | MPEG Audio Stream, Layer III |
*.mp4 | audio/mp4, video/mp4 | MPEG-4 Audio/Video |
*.mpeg | video/mpeg | MPEG Video Stream, Layer II |
*.mpg | video/mpeg | MPEG Video Stream, Layer II |
*.mpp | application/vnd.ms-project | MS Project Project |
*.ogg | application/ogg, audio/ogg | Ogg Vorbis |
application/pdf | Portable Document Format | |
*.png | image/png | Portable Network Graphics |
*.pot | application/vnd.ms-powerpoint | MS PowerPoint Template |
*.pps | application/vnd.ms-powerpoint | MS PowerPoint Slideshow |
*.ppt | application/vnd.ms-powerpoint | MS PowerPoint Presentation |
*.rtf | application/rtf, text/rtf | Rich Text Format |
*.svf | image/vnd.svf | Simple Vector Format |
*.tif | image/tiff | Tagged Image Format File |
*.tiff | image/tiff | Tagged Image Format File |
*.txt | text/plain | Plain Text |
*.wdb | application/vnd.ms-works | MS Works Database |
*.wps | application/vnd.ms-works | Works Text Document |
*.xhtml | application/xhtml+xml | Extensible HyperText Markup Language |
*.xlc | application/vnd.ms-excel | MS Excel Chart |
*.xlm | application/vnd.ms-excel | MS Excel Macro |
*.xls | application/vnd.ms-excel | MS Excel Spreadsheet |
*.xlt | application/vnd.ms-excel | MS Excel Template |
*.xlw | application/vnd.ms-excel | MS Excel Workspace |
*.xml | text/xml, application/xml | Extensible Markup Language |
*.zip | application/zip | Compressed Archive |
那么也可以通过js读取file来验证过滤文件类型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { $('#upload-file').change(function() { console.log(this.files[0]); }) }); </script> </head> <body> <input type="file" id="upload-file" accept="image/*" /> </body> </html>上面的代码执行完我们会发现file有一些属性,name,size,type,lastmodifieddate
可以通过这些属性来验证大小和类型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { $('#upload-file').change(function() { console.log(this.files[0]); var fileSize = (this.files[0].size / 1024).toFixed(0); var fileType = this.files[0].type; if (fileSize > 2000) { alert('文件过大,不能超过2000kb'); } if (fileType != "image/png") { alert('文件类型为png'); } }); }); </script> </head> <body> <input type="file" id="upload-file" accept="image/*" /> </body> </html>
还可以验证图片的长宽
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 != 0) { if (width != _width) { alert("图片宽度应该为!"+_width+"像素"); return false; } } if (_height != 0) { if (height != _height) { alert("图片高度应该为!"+_height+"像素"); return false; } } callback(); }; image.src = data; }; reader.readAsDataURL(file);
完整的例子如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> /** * * @param {this} value_ [获取input对象,一般为this] * @param {[number]} size_ [文件限制的大小,单位为kb] * @param {[string]} type_ [文件类型,当前支持image和office] *@param {[number]} width [图片宽度,0为不限制] *@param {[number]} height [图片高度,0为不限制] * @param {[function]} callback [验证通过的回调] */ function validfile (value_, size_, type_, _width, _height, 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('文件过大,不能超过'+size_+"kb"); return false; } switch (type_) { case 'image': if (!fileType.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) { alert('请上传图片') return false; } 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 != 0) { if (width != _width) { alert("图片宽度应该为!"+_width+"像素"); return false; } } if (_height != 0) { if (height != _height) { alert("图片高度应该为!"+_height+"像素"); return false; } } callback(); }; image.src = data; }; reader.readAsDataURL(file); break; case 'office': if (!fileType.match(/.doc|.docx|.xls|.xlsx|.ppt|.pptx/i)) { alert('请上传word、excel或ppt文件') return false; } callback(); break; default: console.error('type_参数设置不正确!') return false; break; } } bready(function() { $('#upload-file').change(function() { validfile(this, 2000, 'image', 0, 0, function() { alert('验证成功') }) }) }); </script> </head> <body> <input type="file" id="upload-file" accept="image/*" /> </body> </html>
网友评论1