上传文件之前validation文件扩展名

我正在上传图片到一个servlet。 上传的文件是否为图片的validation仅在服务器端完成，方法是检查文件头中的幻数。 在将表单提交给servlet之前，有什么方法可以validation客户端的扩展吗？ 一旦我进入它开始上传。

我在客户端使用JavaScript和jQuery。

更新：我终于结束了与服务器端validation读取字节和拒绝上传，如果它不是一个图像。

Answer 1

可以仅检查文件扩展名，但用户可以轻松地将virus.exe重命名为virus.jpg并“通过”validation。

对于它的价值，这里是代码来检查文件扩展名和中止如果不符合其中一个有效的扩展名:(select无效的文件，并尝试提交查看警报的行动）

 var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"]; function Validate(oForm) { var arrInputs = oForm.getElementsByTagName("input"); for (var i = 0; i < arrInputs.length; i++) { var oInput = arrInputs[i]; if (oInput.type == "file") { var sFileName = oInput.value; if (sFileName.length > 0) { var blnValid = false; for (var j = 0; j < _validFileExtensions.length; j++) { var sCurExtension = _validFileExtensions[j]; if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { blnValid = true; break; } } if (!blnValid) { alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", ")); return false; } } } } return true; } 

 <form onsubmit="return Validate(this);"> File: <input type="file" name="my file" /><br /> <input type="submit" value="Submit" /> </form> 

Answer 2

没有一个现有的答案看起来相当简洁，因为要求简单。 检查一个给定的文件input字段是否有一个扩展名，可以按如下方式完成：

 function hasExtension(inputID, exts) { var fileName = document.getElementById(inputID).value; return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName); } 

所以示例用法可能是（ upload是文件input的id ）：

 if (!hasExtension('upload', ['.jpg', '.gif', '.png']) { // ... block upload } 

或者作为一个jQuery插件：

 $.fn.hasExtension = function(exts) { return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test($(this).val()); } 

用法示例：

 if (!$('#upload').hasExtension(['.jpg', '.png', '.gif'])) { // ... block upload } 

.replace(/\./g, '\\.')是为了避免正则expression式的点，所以基本的扩展名可以在没有任何字符匹配的情况下传入。

没有错误检查这些，以保持他们短，大概如果你使用它们，你会确保input存在第一，扩展数组是有效的！

Answer 3

 <script> $(document).ready(function () { $('input[type=file]').change(function () { var val = $(this).val().toLowerCase(); var regex = new RegExp("(.*?)\.(docx|doc|pdf|xml|bmp|ppt|xls)$"); if(!(regex.test(val))) { $(this).val(''); alert('Please select correct file format'); } }); }); </script> 

Answer 4

检查是否select了文件

  if (document.myform.elements["filefield"].value == "") { alert("You forgot to attach file!"); document.myform.elements["filefield"].focus(); return false; } 

检查文件扩展名

  var res_field = document.myform.elements["filefield"].value; var extension = res_field.substr(res_field.lastIndexOf('.') + 1).toLowerCase(); var allowedExtensions = ['doc', 'docx', 'txt', 'pdf', 'rtf']; if (res_field.length > 0) { if (allowedExtensions.indexOf(extension) === -1) { alert('Invalid file Format. Only ' + allowedExtensions.join(', ') + ' are allowed.'); return false; } } 

Answer 5

我喜欢这个例子：

 <asp:FileUpload ID="fpImages" runat="server" title="maximum file size 1 MB or less" onChange="return validateFileExtension(this)" /> <script language="javascript" type="text/javascript"> function ValidateFileUpload(Source, args) { var fuData = document.getElementById('<%= fpImages.ClientID %>'); var FileUploadPath = fuData.value; if (FileUploadPath == '') { // There is no file selected args.IsValid = false; } else { var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase(); if (Extension == "gif" || Extension == "png" || Extension == "bmp" || Extension == "jpeg") { args.IsValid = true; // Valid file type FileUploadPath == ''; } else { args.IsValid = false; // Not valid file type } } } </script> 

Answer 6

如果您需要在input字段中testing远程URL，则可以尝试使用您感兴趣的types来testing简单的正则expression式。

 $input_field = $('.js-input-field-class'); if ( !(/\.(gif|jpg|jpeg|tiff|png)$/i).test( $input_field.val() )) { $('.error-message').text('This URL is not a valid image type. Please use a url with the known image types gif, jpg, jpeg, tiff or png.'); return false; } 

这将捕捉以.gif，.jpg，.jpeg，.tiff或.png 结尾的任何内容

我应该注意到，像Twitter这样的热门网站在他们的图像的末尾附加了一个尺寸属性。 例如，即使它是一个有效的图像types，下面的testing也会失败：

 https://pbs.twimg.com/media/BrTuXT5CUAAtkZM.jpg:large 

因此，这不是一个完美的解决scheme。 但是它会让你达到90％左右。

Answer 7

我来到这里是因为我确信这里的答案都不是很有诗意：

 function checkextension() { var file = document.querySelector("#fUpload"); if ( /\.(jpe?g|png|gif)$/i.test(file.files[0].name) === false ) { alert("not an image!"); } } 

 <input type="file" id="fUpload" onchange="checkextension()"/> 

Answer 8

试试这个（适用于我）

 function validate(){ var file= form.file.value; var reg = /(.*?)\.(jpg|bmp|jpeg|png)$/; if(!file.match(reg)) { alert("Invalid File"); return false; } } 

 <form name="form"> <input type="file" name="file"/> <input type="submit" onClick="return validate();"/> </form> 

Answer 9

假设你使用jQuery，这是一个更可重用的方法

库函数（不需要jQuery）：

 function stringEndsWithValidExtension(stringToCheck, acceptableExtensionsArray, required) { if (required == false && stringToCheck.length == 0) { return true; } for (var i = 0; i < acceptableExtensionsArray.length; i++) { if (stringToCheck.toLowerCase().endsWith(acceptableExtensionsArray[i].toLowerCase())) { return true; } } return false; } String.prototype.startsWith = function (str) { return (this.match("^" + str) == str) } String.prototype.endsWith = function (str) { return (this.match(str + "$") == str) } 

页面function（需要jQuery（几乎））：

 $("[id*='btnSaveForm']").click(function () { if (!stringEndsWithValidExtension($("[id*='fileUploader']").val(), [".png", ".jpeg", ".jpg", ".bmp"], false)) { alert("Photo only allows file types of PNG, JPG and BMP."); return false; } return true; }); 

Answer 10

 <script type="text/javascript"> function file_upload() { var imgpath = document.getElementById("<%=FileUpload1.ClientID %>").value; if (imgpath == "") { alert("Upload your Photo..."); document.file.word.focus(); return false; } else { // code to get File Extension.. var arr1 = new Array; arr1 = imgpath.split("\\"); var len = arr1.length; var img1 = arr1[len - 1]; var filext = img1.substring(img1.lastIndexOf(".") + 1); // Checking Extension if (filext == "bmp" || filext == "gif" || filext == "png" || filext == "jpg" || filext == "jpeg" ) { alert("Successfully Uploaded...") return false; } else { alert("Upload Photo with Extension ' bmp , gif, png , jpg , jpeg '"); document.form.word.focus(); return false; } } } function Doc_upload() { var imgpath = document.getElementById("<%=FileUpload2.ClientID %>").value; if (imgpath == "") { alert("Upload Agreement..."); document.file.word.focus(); return false; } else { // code to get File Extension.. var arr1 = new Array; arr1 = imgpath.split("\\"); var len = arr1.length; var img1 = arr1[len - 1]; var filext = img1.substring(img1.lastIndexOf(".") + 1); // Checking Extension if (filext == "txt" || filext == "pdf" || filext == "doc") { alert("Successfully Uploaded...") return false; } else { alert("Upload File with Extension ' txt , pdf , doc '"); document.form.word.focus(); return false; } } } </script> 

Answer 11

 var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"]; function ValidateSingleInput(oInput) { if (oInput.type == "file") { var sFileName = oInput.value; if (sFileName.length > 0) { var blnValid = false; for (var j = 0; j < _validFileExtensions.length; j++) { var sCurExtension = _validFileExtensions[j]; if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { blnValid = true; break; } } if (!blnValid) { alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", ")); oInput.value = ""; return false; } } } return true; } 

 File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br /> File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br /> File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br /> 

Answer 12

您可以创build一个包含所需文件types的数组，并在jQuery中使用$ .inArray（）来检查数组中是否存在文件types。

 var imageType = ['jpeg', 'jpg', 'png', 'gif', 'bmp']; // Given that file is a file object and file.type is string // like "image/jpeg", "image/png", or "image/gif" and so on... if (-1 == $.inArray(file.type.split('/')[1], imageType)) { console.log('Not an image type'); } 

Answer 13

在我看来，这是最好的解决scheme，比其他解决scheme要短得多：

 function OnSelect(e) { var acceptedFiles = [".jpg", ".jpeg", ".png", ".gif"]; var isAcceptedImageFormat = ($.inArray(e.files[0].extension, acceptedFiles)) != -1; if (!isAcceptedImageFormat) { $('#warningMessage').show(); } else { $('#warningMessage').hide(); } } 

在这种情况下，使用此设置从Kendo上传控件调用该函数：

.Events(e => e.Select("OnSelect")) 。

Answer 14

[打字稿]

 uploadFileAcceptFormats: string[] = ['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml']; // if you find the element type in the allowed types array, then read the file isAccepted = this.uploadFileAcceptFormats.find(val => { return val === uploadedFileType; }); 

Answer 15

您可以使用可用于input文件types的accept属性。 检出MDN文档