파일 업로드 전 파일 확장자 확인

서블릿에 이미지를 업로드하고 있습니다. 업로드 된 파일이 이미지인지 여부는 파일 헤더의 매직 넘버를 확인하여 서버 측에서만 확인합니다. 서블릿에 양식을 제출하기 전에 클라이언트 측에서 확장을 검증하는 방법이 있습니까? Enter 키를 누르면 업로드가 시작됩니다.

클라이언트 측에서 Javascript와 jQuery를 사용하고 있습니다.

업데이트 : 마침내 바이트를 읽고 이미지가 아닌 경우 업로드를 거부하는 서버 측 유효성 검사로 끝났습니다.

파일 확장자 만 확인할 수 있지만 사용자는 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 />

잘못된 파일 확장자의 경우 경고를 표시하고 입력을 재설정합니다.

기존 답변 중 어느 것도 요청의 단순성을 위해 충분히 간결 해 보이지 않았습니다. 주어진 파일 입력 필드에 세트의 확장자가 있는지 확인하는 것은 다음과 같이 수행 할 수 있습니다.

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, '\\.')그 기본 확장이 모든 문자와 일치하는 점없이 전달 될 수 있도록 정규 표현식에 대한 점을이 탈출하는 것입니다.

짧게 유지하기 위해 오류를 검사하지 않습니다. 아마도 이것을 사용하면 입력이 먼저 존재하고 확장 배열이 유효한지 확인할 것입니다!

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

나는 여기에있는 답 중 어느 것도 시적이지 않다고 확신했기 때문에 여기에 왔습니다.

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()"/>

파일이 선택되었는지 확인하십시오

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

이 예를 좋아합니다.

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

입력 유형 = "파일"을 사용하여 업로드 파일을 선택합니까? 그렇다면 accept 속성을 사용하지 않는 이유는 무엇입니까?

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

입력 필드에서 원격 URL을 테스트해야하는 경우 관심있는 유형으로 간단한 정규식을 테스트 해 볼 수 있습니다.

$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와 같은 일부 인기 사이트는 이미지 끝에 크기 속성을 추가합니다. 예를 들어 다음은 유효한 이미지 유형이더라도이 테스트에 실패합니다.

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

그렇기 때문에 이것은 완벽한 솔루션이 아닙니다. 그러나 약 90 %까지 도달 할 수 있습니다.

이것을 시도하십시오 (나에게 적합합니다)

  
  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>

     

오늘날 Array.prototype.some ()을 통한 또 다른 예 입니다.

function isImage(icon) {
  const ext = ['.jpg', '.jpeg', '.bmp', '.gif', '.png', '.svg'];
  return ext.some(el => icon.endsWith(el));
}

console.log(isImage('questions_4234589.png'));
console.log(isImage('questions_4234589.doc'));

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

페이지 기능 (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;
});

[TypeScript]

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

accept입력 파일 유형에 사용할 수 있는 속성을 사용할 수 있습니다. Checkout MDN 문서

이것이 jquery에서 수행되는 방법입니다.

$("#artifact_form").submit(function(){
    return ["jpg", "jpeg", "bmp", "gif", "png"].includes(/[^.]+$/.exec($("#artifact_file_name").val())[0])
  });

찾아보기 버튼과 파일 확장자의 유효성을 검사하려면 다음 코드를 사용하십시오.

function fileValidate(){ 
var docVal=document.forms[0].fileUploaded.value;
var extension = docVal.substring(docVal.lastIndexOf(".")+1,docVal.length);
if(extension.toLowerCase() != 'pdf')
alert("Please enter file  in .pdf extension ");

return false;
}

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

필요한 파일 유형을 포함하는 배열을 만들고 jQuery에서 $ .inArray ()를 사용하여 파일 유형이 배열에 존재하는지 확인할 수 있습니다.

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

제출시 확인하거나 해당 컨트롤의 변경 이벤트를 만들 수 있습니다.

var fileInput = document.getElementById('file');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpeg|\.JPEG|\.gif|\.GIF|\.png|\.PNG)$/;
    if (filePath != "" && !allowedExtensions.exec(filePath)) {
    alert('Invalid file extention pleasse select another file');
    fileInput.value = '';
    return false;
    }

확장을 확인하는 것보다 mimetype으로 시도하는 것이 좋습니다. 왜냐하면 때로는 파일이 없어도 존재할 수 있으며 Linux 및 Unix 시스템에서 매우 잘 작동하기 때문입니다.

따라서 다음과 같이 시도 할 수 있습니다.

["image/jpeg", "image/png", "image/gif"].indexOf(file.type) > -1

이것은 내 생각에 가장 좋은 해결책이며 다른 것보다 훨씬 짧습니다.

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 Upload 컨트롤에서 호출됩니다.

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