如何让 jQuery 限制上传的文件类型?
-
19-08-2019 - |
题
我想让 jQuery 将文件上传字段限制为仅 jpg/jpeg、png 和 gif。我正在做后端检查 PHP
已经。我正在通过运行我的提交按钮 JavaScript
函数已经存在,所以我真的只需要知道如何在提交或警报之前检查文件类型。
解决方案
您可以得到一个文件域一样的任何其他字段的值。你不能改变它,但是。
所以,为肤浅检查文件是否有正确的扩展,你可以做这样的事情:
var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
alert('invalid extension!');
}
其他提示
没有必要只是这个任务插件。从几个其他脚本拼凑这样:
$('INPUT[type="file"]').change(function () {
var ext = this.value.match(/\.(.+)$/)[1];
switch (ext) {
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
$('#uploadButton').attr('disabled', false);
break;
default:
alert('This is not an allowed file type.');
this.value = '';
}
});
这里的关键是要上传按钮设置为禁用,除非和直到一个有效的文件类型被选择。
您可以使用jQuery的验证插件: http://docs.jquery.com/Plugins/Validation
这恰好有一个接受()规则已经做了你需要的东西: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension
请注意控制文件的扩展名是不防弹,因为它不以任何方式有关文件的MIME类型。所以,你可以有一个巴纽这是一个word文档和.DOC,这是一个完全有效的png图片。所以,不要忘记,使更多的控制服务器端)
对于前端来说,放置 ' 非常方便接受' 属性(如果您使用的是文件字段)。
例子:
<input id="file" type="file" name="file" size="30"
accept="image/jpg,image/png,image/jpeg,image/gif"
/>
一些重要的注意事项:
不想检查,而在MIME不是什么extention用户在说谎? 如果是,则它是少于一行:
<input type="file" id="userfile" accept="image/*|video/*" required />
对于我的情况下,我用以下代码:
if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {
alert('You must select an image file only');
}
我尝试写工作代码示例,我测试,一切工作。
野兔是代码:
<强> HTML:强>
<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />
<强>使用Javascript:强>
//function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
var val = $(element).val(); //get file value
var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention
if ($.inArray(ext, extentionsArray) == -1) {
alert('false extension!');
}
var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
if (fileSize > maxSize) {
alert("Large file");// if Maxsize from Model > real file size alert this
}
}
此代码工作正常,但唯一的问题是,如果文件格式比指定的选项外,它显示一个警告信息,但它显示的文件名,而应该忽略它。
$('#ff2').change(
function () {
var fileExtension = ['jpeg', 'jpg', 'pdf'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
return false; }
});
这个例子允许仅上传PNG图像。
<强> HTML 强>
<input type="file" class="form-control" id="FileUpload1" accept="image/png" />
<强> JS 强>
$('#FileUpload1').change(
function () {
var fileExtension = ['png'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only '.png' format is allowed.");
this.value = ''; // Clean field
return false;
}
});
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
var file = this.files[0];
name = file.name;
size = file.size;
type = file.type;
//your validation
});
</script>
如果你正在处理多个(HTML 5)文件上传,我把上面提出意见,并修改了一些:
var files = $('#file1')[0].files;
var len = $('#file1').get(0).files.length;
for (var i = 0; i < len; i++) {
f = files[i];
var ext = f.name.split('.').pop().toLowerCase();
if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
alert('invalid extension!');
}
}
function validateFileExtensions(){
var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
var fileErrors = new Array();
$( "input:file").each(function(){
var file = $(this).value;
var ext = file.split('.').pop();
if( $.inArray( ext, validFileExtensions ) == -1) {
fileErrors.push(file);
}
});
if( fileErrors.length > 0 ){
var errorContainer = $("#validation-errors");
for(var i=0; i < fileErrors.length; i++){
errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
}
return false;
}
return true;
}
下面是JavaScript验证一个简单的代码,和它验证后,将清洁的输入文件。
<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>
function validate(file) {
var ext = file.split(".");
ext = ext[ext.length-1].toLowerCase();
var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];
if (arrayExtensions.lastIndexOf(ext) == -1) {
alert("Wrong extension type.");
$("#image").val("");
}
}