Проверка расширения файла перед загрузкой файла

Question

Я загружаю изображения в сервлет. Проверка того, является ли загруженный файл изображением, выполняется только на стороне сервера, проверяя магические числа в заголовке файла. Есть ли способ проверить расширения на стороне клиента перед отправкой формы на сервлет? Как только я попал в него, он начинает загружаться.

Я использую Javascript и jQuery на стороне клиента.

Update: я был, наконец, в конечном итоге с сервера проверки на стороне, которая считывает байты & отклоняет загрузку, если это не изображение.

Answer 1

Можно проверить только расширение файла, но пользователь может легко переименовать virus.exe в virus.jpg и «пройти» проверку.

Для чего это стоит, вот код, чтобы проверить расширение файла и прервать, если не соответствует одному из допустимых расширений: (выбрать неверный файл и попробуйте представить, чтобы увидеть предупреждение в действии)

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>

Обратите внимание, код позволит пользователю посылать без выбора файла ... если это необходимо, удалите строку if (sFileName.length > 0) { и это ассоциировать закрывающая скобка. Код будет проверять любой входной файл в форме, независимо от его имени.

Это может быть сделано с помощью jQuery в меньшем количестве строк, но мне достаточно удобно с «сырым» JavaScript, и конечный результат тот же.

В случае, если у вас есть несколько файлов, или вы хотите, чтобы вызвать проверку при изменении файла, а не только в форме представления, используйте такой код вместо:

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 2

Вот более многоразовый способ, если вы используете 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) } 

функция Page (требует 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 3

Мне нравится этот пример:

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

проверить, что если файл выбран или не

 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

Ни один из существующих ответов, казалось, вполне достаточно компактен для простоты запроса.Проверка, является ли данный входной файл поле имеет расширение из набора может быть выполнено следующим образом:

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

Так пример использования может быть (где upload является 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, '\\.') существует, чтобы избежать точки для регулярного выражения, чтобы базовые расширения могли быть переданы без точек, соответствующих любому символу.

У вас нет ошибок при проверке на наличие коротких сообщений, предположительно, если вы их используете, вы убедитесь, что вход существует первым, и массив расширений действителен!

Answer 6

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

Если вы необходимость тестировать удаленные адреса в поле ввода, вы можете попробовать проверки простых регулярных выражений с типами, которые вы заинтересованы в.

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

Это будет захватить что-либо завершение in .gif, .jpg, .jpeg, .tiff или .png

Я должен отметить, что некоторые популярные сайты, такие как Twitter, добавляют атрибут размера к концу своих изображений. Например, следующий будет терпеть неудачу это испытание, даже если это допустимый тип изображения:

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

Из-за того, что это не идеальное решение. Но это приблизит вас к 90% пути.

Answer 8

$(function() { 
    $('input[type=file]').change(function() { 
     var val = $(this).val().toLowerCase(), 
      regex = new RegExp("(.*?)\.(docx|doc|pdf|xml|bmp|ppt|xls)$"); 

     if (!(regex.test(val))) { 
      $(this).val(''); 
      alert('Please select correct file format'); 
     } 
    }); 
}); 

Answer 9

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 10

Вы можете создать массив, который включает в себя тип файла, который необходим и использовать $ .inArray() в JQuery, чтобы проверить, если Filetype существует в массиве.

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 11

Я пришел сюда, потому что я был уверен, что ни один из ответов здесь не было совсем ... поэтично:

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 12

Это лучшее решение, на мой взгляд, что значительно короче, чем другие:

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 13

попробовать это (работает для меня)

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

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

 

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

Вы можете использовать accept атрибут для типов входных файлов. Checkout MDN documentation