如何让 jQuery 限制上传的文件类型？

小开

最佳答案

您可以得到一个文件字段的值，就像其他字段一样。但你不能改变它。

为了检查一个文件是否有正确的扩展名，你可以这样做:

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
alert('invalid extension!');
}

小开

你可以使用 jQuery 的验证插件: Http://docs.jquery.com/plugins/validation

它恰好有一个接受()规则，可以完全满足您的需要: Http://docs.jquery.com/plugins/validation/methods/accept#extension

请注意，控制文件扩展名并不是万无一失的，因为它与文件的 imetype 没有任何关系。这样你就可以。这是一个 word 文档和一个。博士，这是一个完美有效的 png 图像。所以不要忘记在服务器端制作更多的控件;)

小开

这个任务不需要插件，这是从其他几个脚本中拼凑出来的:

$('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 = '';
}
});

这里的技巧是将上传按钮设置为禁用，除非选择了有效的文件类型。

小开

不想检查 MIME 而不想检查用户正在撒谎的任何扩展？如果是这样，那么它不到一行:

<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');
}

小开

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;
}

小开

<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!');


}
}

小开

对于前端来说，如果您使用的是文件字段，那么放置‘ 接受’属性是非常方便的。

例如:

<input id="file" type="file" name="file" size="30"
accept="image/jpg,image/png,image/jpeg,image/gif"
/>

一些重要的注意事项:

小开

我尝试编写工作代码的例子，我测试它和一切工作。

兔子是密码:

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
}
}

小开

下面是一个用于 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("");
}
}

小开

这段代码工作得很好，但是唯一的问题是，如果文件格式不是指定的选项，它会显示一条警告消息，但是它会显示文件名，而应该忽略它。

$('#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 图像。

超文本标示语言

<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;
}
});

小开

    $("input[name='btnsubmit']").attr('disabled', true);
$('input[name="filphoto"]').change(function () {
var ext = this.value.match(/\.(.+)$/)[1];
switch (ext)
{
case 'jpg':
case 'jpeg':
case 'png':
case 'bmp':
$("input[name='btnsubmit']").attr('disabled', false);
break;
default:
alert('This is not an allowed file type.');
$("input[name='btnsubmit']").attr('disabled', true);
this.value = '';