如何让jQuery限制上传文件types？
我想有jQuery限制file upload字段只有jpg / jpeg，png和gif。 我正在做PHP后端检查。 我正在通过JavaScript函数运行我的提交button，所以我只需要知道如何在提交或提醒之前检查文件types。
您可以获得文件字段的值与其他字段相同。 但是，你不能改变它。
所以要表面检查一个文件是否有正确的扩展名，你可以这样做：
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 = ''; } });
这里的技巧是将上传button设置为禁用，除非select了有效的文件types。
你可以使用jQuery的validation插件： http : //docs.jquery.com/Plugins/Validation
碰巧有一个accept（）规则，正是你所需要的： http : //docs.jquery.com/Plugins/Validation/Methods/accept#extension
请注意，控制文件扩展名不是防弹的，因为它与文件的MIMEtypes无关。 所以你可以有一个.png这是一个word文档和一个.doc这是一个完全有效的PNG图像。 所以不要忘记在服务器端做更多的控制;）
不想检查MIME而不是检查用户是在说什么？ 如果是这样，那么它不足一行：
<input type="file" id="userfile" accept="image/*|video/*" required />
对于前端来说，如果使用的是文件字段，那么使用“ 接受 ”属性是非常方便的。
例：
<input id="file" type="file" name="file" size="30" accept="image/jpg,image/png,image/jpeg,image/gif" />
几个重要的笔记：
- Internet Explorer 10，Firefox，Opera，Chrome和Safari 6支持accept属性。
- 它将在不同浏览器的文件浏览器对话框中以不同的文件扩展名显示文本。
对于我的情况，我使用了以下代码：
if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) { alert('You must select an image file only'); }
我尝试编写工作代码示例，我testing它，一切正常。
兔子是代码：
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）file upload，我采取了最高build议的意见，并修改了一下：
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; }
这里是一个简单的JavaScriptvalidation代码，validation后它将清理input文件。
<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(""); } }
