我希望防止用户上传服务器会从包含最少 JavaScript 的页面拒绝的文件,最好不要添加任何严重的依赖项(例如纯粹为了解决这一问题的 jQuery)。
由于我不是针对旧用户,因此我使用浏览器的表单验证系统来检查用户是否选择了有效文件,但它似乎只关心用户是否选择了文件,而不管类型如何。
> i = document.querySelector('input[type=file]')
<input type="file" accept="image/*" name="attachment" required>
> i.accept
"image/*"
> i.files[0].type
"application/x-zip-compressed"
> i.checkValidity()
true
有一个简单的方法可以做到这一点吗?我发现唯一接近的是jQuery 验证,但它是一个重量级的解决方案。
您可以只执行 RegExp 测试 - 以下将 MIME 类型字符串中的通配符转换为匹配 RegExp 语法,并针对输入文件的类型进行测试:
( new RegExp( i.accept.replace( '*', '.\*' ) ) ).test( i.files[ 0 ].type )
演示在这里.
EDIT:
我最终找到了一种方法,使此功能与本机浏览器验证行为无缝(即防止提交无效输入,使用本机验证警告通知用户),但我不太确定代码是如何工作的,或者它是否是一个好的实践(我问过这里陌生的部分)。然而,这似乎表现符合预期,至少在 Chrome 31 中是这样:
void function enhanceFileInputTypeValidityCheck(){
var inputPrototype = document.createElement( 'input' ).constructor.prototype;
var nativeCheckValidity = inputPrototype.checkValidity;
function validateFileInputType( input ){
var MIMEtype = new RegExp( input.accept.replace( '*', '.\*' ) );
return Array.prototype.every.call( input.files, function passesAcceptedFormat( file ){
return MIMEtype.test( file.type );
} );
}
function validateInputs(){
Array.prototype.forEach.call( document.querySelectorAll( 'input, select' ), function callValidation( input ){
input.checkValidity();
} );
}
inputPrototype.checkValidity = function enhancedCheckValidity(){
if( this.type === 'file' && this.accept && this.files && this.files.length ){
if( !validateFileInputType( this ) ){
this.setCustomValidity( 'Please only submit files of type ' + this.accept );
return false;
}
}
return nativeCheckValidity.apply( this );
}
Array.prototype.forEach.call( [ 'change', 'input' ], function bindValidation( event ){
document.documentElement.addEventListener( event, validateInputs );
} );
}();
演示在这里(尝试使用无效的文件类型提交)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)